我想创建简单的组件来创建。例如,列号和行号有两个输入。
如何生成用户选择的行数和列数?
这是模板。遍历 for smells bad for me :<
<input type="number" placeholder="Length"/>
<input type="number" placeholder="width"/>
<div class="map">
<div class="row">
<div class="cell">Test</div>
</div>
</div>
如果能用 typescript 来做就太好了
最佳答案
事实上,在同一模板中的 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
指令。我不完全是你的用例......
有关详细信息,请参阅这些问题:
关于angularjs - 在不迭代数组的情况下从 Angular 生成标记,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38255173/