Question

我想创建一个简单的组件来创建。例如，列号和行号有两个输入。

如何根据用户的行数和列数进行选择？

这是模板。为了闻起来对我不好的事情进行迭代：＆lt;

 <input type="number" placeholder="Length"/>
<input type="number" placeholder="width"/>

<div class="map">
  <div class="row">
    <div class="cell">Test</div>
  </div>
</div>

在typescript

中这样做会很棒

Answer 1

事实上，在同一个模板中ngFor内ngFor并不理想。

话虽这么说，你可以利用一个或几个其他组件来分割你的不同循环。例如：一行表示行，一行表示单元格。

在这种情况下，您将拥有：

<div class="map">
  <div class="row" row [cells]="row.cells" *ngFor="let row of rows"></div>
</div>

和行组件

@Component({
  selector: 'row',
  template: `
    <div *ngFor="let cell of cells">{{cell.value}}</div>
  `
})
export class RowComponent {
  @Input()
  cells: any[];
}

您还可以注意到您可以利用ngFormTemplate指令。我不完全是你的用例...

有关详细信息，请参阅以下问题：

从角度生成标记而不迭代数组

1 个答案: