Angular - ngFor 收集具有数组属性的对象答案

【问题标题】：Angular - ngFor over collection of objects that have an array propertyAngular - ngFor 收集具有数组属性的对象
【发布时间】：2018-01-19 12:24:05
【问题描述】：

我有这样的课：

export class TableColumn {
  columnName: string;
  isToFilter: boolean;
  isToSort: boolean;
  isLink: boolean;
  linkUrl: string;
  columnData: any[];

constructor(
    columnName: string,
    isToFilter: boolean,
    isToSort: boolean,
    isLink: boolean,
    linkUrl: string,
    columnData: any[]) {
    this.columnName = columnName;
    this.isToFilter = isToFilter;
    this.isToSort = isToSort;
    this.isLink = isLink;
    this.linkUrl = linkUrl;
    this.columnData = columnData;
  }
}

您可以看到这里有一个数组属性 - columnData。我的问题是当我使用*ngFor 指令来迭代此类的实例数组时，如下所示：

 ngFor="let column of tableColumns"

指令不仅遍历tableColumns 的内容，而且还遍历每个实例中columnData 属性的内容。

我想知道如何不遍历属性 columnData 的内容。

【问题讨论】：

你能分享你的模板 sn-p 吗？
{{column}}
@bambaniasz 你想说column 变量从ColumnData 的每个tableColumn 中获取值？
ngFor 在我这样使用它时迭代columData 属性
{{column}}
。 tableColumns 是一个 TableColumn 对象数组。

标签： javascript angular typescript angular5

【解决方案1】：

你是说你有一个 TableColumn 对象的数组，并且你想循环这些对象，然后在每个对象内部也循环 columnData 数组？

首先，如您所知，您可以像这样编写您的类对象来简化事情。它编译成完全相同的 JavaScript。 Look at this page to see what I mean.

export class TableColumn {
    constructor(
        public columnName: string,
        public isToFilter: boolean,
        public isToSort: boolean,
        public isLink: boolean,
        public linkUrl: string,
        public columnData: any[]
    ) { }
}

在我们的控制器中有一些这样的示例数据：

public tableColumnList = [
  new TableColumn('one', true, true, true, 'google.com', [1,2,3]),
  new TableColumn('two', true, true, true, 'google.com', [4,5,6, 7, 8]),
  new TableColumn('three', true, true, true, 'google.com', [9, 10, 11])
];

您可以像这样使用嵌套的*ngFor 指令。

<div *ngFor="let tc of tableColumnList">
  <h4>{{tc.name}}</h4>
  <ul>
    <li *ngFor="let data of tc.columnData">
      {{data}}
    </li>
  </ul>
</div>

【讨论】：