html - 如何在 Angular 8 中创建动态网格组件并引导行、列和列表字符串？

Question

我在理解如何创建网格组件时遇到问题，该组件输入了一些列、行和网格内部元素的字符串列表。

我的thumbnails.component.ts

import { Component, Input } from '@angular/core';

@Component({
  selector: 'thumbnails',
  templateUrl: './thumbnails.component.html',
  styleUrls: ['./thumbnails.component.scss']
})

export class ThumbnailsComponent{

  public UrlList = ["one","two","three","four","five","six","seven","eight","nine","ten"];
  private col: Number = 4;
  private row: Number = 4;

}

我的thumbnails.component.html

<div id="grid">
    <ng-container *ngFor="let x of UrlList; let i = index">
        <div class="row">
            <div class="col">
                {{x}}
            </div>
        </div>
    </ng-container>
</div>

我不知道如何实现它。有人可以帮我解释一下吗？

Answer 1

另一种方法是使用 display gird 和 gridTemplateColumns 属性的 CSS 方式。

缩略图.component.ts

import { Component, Input } from '@angular/core';

@Component({
  selector: 'thumbnails',
  templateUrl: './thumbnails.component.html',
  styleUrls: ['./thumbnails.component.scss']
})

export class ThumbnailsComponent{

  public UrlList =["one","two","three","four","five","six","seven","eight","nine","ten"];

  grid(v) {
    document.getElementById(
      'grid'
    ).style.gridTemplateColumns = `repeat( ${v.value}, 175px)`;//Important step
  }
}

缩略图.component.css

.grid-container {
  display: grid;
  grid-gap: 15px;
}

thumbnails.component.html

<label>Enter Col :</label><input type="text" #col />
<button (click)="grid(col)">Set Grid</button>
<div id="grid" class="grid-container row">
  <ng-container *ngFor="let x of UrlList; let i = index">
    <div class="col">
      {{ x }}
    </div>
  </ng-container>
</div>