angularjs - 在不迭代数组的情况下从 Angular 生成标记

标签 angularjs typescript angular

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

如何生成用户选择的行数和列数?

这是模板。遍历 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/

相关文章:

angular - 你如何从 Angular 4 的父组件继承模板?

javascript - AngularJS 常量

html - 为什么 ionic 标签没有正确呈现?

typescript - 为什么我会收到此消息(错误 : TS2376) while running oak.?正文中的错误详细信息

javascript - typescript 返回解构?

javascript - 如何显示对象数组中的特定对象(Angular 5、TypeScript)

Angular:如何在访问其 nativeElements 之前等待元素准备就绪?

javascript - 为什么 $doCheck 在 View 更改时被调用两次,我该怎么办?

angularjs - 使用min "Different sources attempting to write to the same destination"

Javascript 按时间间隔对数组进行分组