javascript - Angular - ngFor 具有数组属性的对象集合

Question

我有一堂这样的课:

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的内容。

Answer 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[]
    ) { }
}

在我们的 Controller 中使用一些像这样的示例数据:

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>