Angular6 multiple ngfor для одной строки - как передать два значения в один ngfor

В заголовке таблицы у меня есть динамические столбцы и функции сортировки поиска. но для определенных столбцов мне нужно отключить функцию сортировки. В таблице

<thead>
      <tr class="table-head">
        <th *ngFor="let colName of reportColHeader; let i = index">
          {{colName}}
          <i [class]="sortIcons[colName]" (click)="toggleSort(colName, i)"></i>
        </th>
      </tr>
    </thead>

В конструктор я передаю значения в виде массива. Не с сервера только статика

this.reportColHeader = ['ID', 'LABEL 1', 'LABEL 2', 'More'];

так что результат будет как ниже

<tr>
 <th>ID <i></i></th>
 <th>LABEL 1 <i></i></th>
 <th>LABEL 2 <i></i></th>
 <th>More <i></i></th>
</tr>

Here I want to disable (функция сортировки) из определенного столбца.
Не только последний столбец или n-й столбец. Я предполагаю, что можно иметь еще один массив, например

this.reportColHeaderOptions = ['true', 'true', 'false', 'false'];

по этим значениям можно показать или скрыть <i></i>
Итак, как я могу передать это внутри ngFor.
Примечание: здесь я не могу использовать индекс, так как индекс изменится.
но я могу следовать за this.reportColHeader и this.reportColHeaderOpions в том же порядке.

Вместо двух массивов вы также можете передать как массив объектов, верно? Например, [{label: 'ID', isSortDisabled: true}, {label: 'LABEL 1', isSortDisabled: true}] что-то вроде этого?

Akshath Kumar 26.10.2018 11:29
3
1
699
1

Ответы 1

Почему нельзя использовать index? Ты можешь сделать это :

    <th *ngFor="let colName of reportColHeader; let i = index">
      {{colName}}
      <i *ngIf="reportColHeaderOpions[i]=='true'"></i>
    </th>

Насколько это возможно. оба находятся в разном массиве. так индекс будет работать.? отображается ERROR TypeError: Невозможно прочесть свойство «0» неопределенного значения. так как это другой массив.

Kanagan 26.10.2018 04:05

Это означает, что reportColHeaderOpions в данном контексте не существует. Вы уверены, что в вашем компоненте есть public reportColHeaderOpions = ['true', 'true', 'false', 'false'];? Да, это 2 разных массива, но вы можете получить к ним доступ с помощью [i], поскольку i - это просто число (0, 1, 2, 3), которое вы объявили ранее.

Maarti 26.10.2018 04:12

Другие вопросы по теме