Angular - ngFor over collection of objects that have an array property

Question

I have a class like this:

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;
  }
}

You can see there is an array property here - columnData. My problem is when I use *ngFor directive to iterate over array of instances of this class like this:

 ngFor="let column of tableColumns"

the directive iterate not only through content of tableColumns but through content of columnData property in every instance as well.

I would like to know how to not iterate through content of property columnData.

@bambaniasz You want to say that column variable get's values from ColumnData of each tableColumn ? — tchelidze
– tchelidze, Commented Jan 19, 2018 at 12:36
ngFor iterate over columData properties when I use it like this<div *ngFor="let column of tableColumns"> {{column}} </div>. and tableColumns is an array of TableColumn objects. — bambaniasz
– bambaniasz, Commented Jan 19, 2018 at 12:38

Chris Barr · Accepted Answer · 2018-01-19 12:42:59Z

You're saying you have an array of the TableColumn objects, and you want to loop over those, and then inside each of them also loop over the columnData array?

First, just so you know, you can write your class object like this to simplify things. It compiles down to the exact same 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[]
    ) { }
}

With some sample data like this in our 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])
];

You can just use nested *ngFor directives, like this.

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

Collectives™ on Stack Overflow

Angular - ngFor over collection of objects that have an array property

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related