Angular - ngFor 过度收集具有数组 属性 的对象

Question

我有一个 class 这样的：

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 指令遍历此 class 的实例数组时，如下所示：

 ngFor="let column of tableColumns" 

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

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

Answer 1

你是说你有一个 TableColumn 对象的数组，你想遍历这些对象，然后在每个对象中也循环遍历 columnData 数组？

首先，请注意，您可以像这样编写 class 对象以简化操作。它编译成完全相同的 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>