Angular2 - make * ngFor с условным набором

Question

Мне нужно создать условную коллекцию в зависимости от текущего значения родительского * ngFor.

g.id сетки и идентификатор c.idgrid представляет собой отношение между массивами cols и grids.

Как я могу сделать эту работу с * ngFor?

//arrays 

grids: Array<{ title: string, id: any }>; 
cols: Array<{ name: string, idgrid: any }>; 

constructor(public navCtrl: NavController, public navParams: NavParams, public acc: AccountService) { 
    this.grids = [ 
     { title: 'Informações', id: 1 }, 
     { title: 'E-mails', id: 2 }, 
     { title: 'Contas Relacionadas', id: 3 }, 
     { title: 'Endereços', id: 4 }, 
     { title: 'Amostras', id: 5 }, 
     { title: 'Atividades', id: 6 } 
    ];  
    this.cols = [ 
     { name: 'Ordem', idgrid: 1 }, 
     { name: 'Informação', idgrid: 1 }, 
     { name: 'Valor', idgrid: 1 }, 
     { name: 'Unidade de medida', idgrid: 1 }, 
     { name: 'Obrigatório', idgrid: 1 }, 
     { name: 'Tipo de e-mail', idgrid: 2 }, 
     { name: 'E-mail', idgrid: 2 }, 
     { name: 'Relação', idgrid: 3 }, 
     { name: 'Conta', idgrid: 3 }, 
     { name: 'Ativo?', idgrid: 3 }, 
     { name: 'Tipo de endereço', idgrid: 4 }, 
     { name: 'Endereço', idgrid: 4 }, 
     { name: 'Complemento', idgrid: 4 }, 
     { name: 'CEP', idgrid: 4 }, 
     { name: 'Bairro', idgrid: 4 }, 
     { name: 'Cidade', idgrid: 4 }, 
     { name: 'Estado', idgrid: 4 }, 
     { name: 'País', idgrid: 4 }, 
     { name: 'Latitude', idgrid: 4 }, 
     { name: 'Longitude', idgrid: 4 }, 
     { name: 'Observação', idgrid: 4 }, 
     { name: 'ID', idgrid: 5 }, 
     { name: 'Nº amostra', idgrid: 5 }, 
     { name: 'Tipo de Amostra', idgrid: 5 }, 
     { name: 'Conta', idgrid: 5 }, 
     { name: 'Conta Relacionada', idgrid: 5 }, 
     { name: 'Identificação', idgrid: 5 }, 
     { name: 'Data da Coleta', idgrid: 5 }, 
     { name: 'Situação da Amostra', idgrid: 5 }, 
     { name: 'Parecer da Amostra', idgrid: 5 }, 
     { name: 'Conclusão', idgrid: 5 }, 
     { name: 'Centro de Serviço', idgrid: 5 }, 
     { name: 'Ativo?', idgrid: 5 }, 
     { name: 'ID', idgrid: 6 }, 
     { name: 'Nº Atividade', idgrid: 6 }, 
     { name: 'Tipo de Atividade', idgrid: 6 }, 
     { name: 'Etapa Atual', idgrid: 6 }, 
     { name: 'Conta', idgrid: 6 }, 
     { name: 'Conta Relacionada', idgrid: 6 }, 
     { name: 'Identificação', idgrid: 6 }, 
     { name: 'Responsável', idgrid: 6 }, 
     { name: 'Centro custo', idgrid: 6 }, 
     { name: 'Área de Serviço', idgrid: 6 }, 
     { name: 'Proprietário', idgrid: 6 }, 
     { name: 'Execução', idgrid: 6 }, 
     { name: 'Conclusão', idgrid: 6 }, 
     { name: 'Finalizada', idgrid: 6 }, 
     { name: 'Ativo?', idgrid: 6 } 
    ];  
} 

Вид:

<ion-list *ngfor="let g of grids"> 
    <h1>{{g.title}}</h1> 
    <div class="table-responsive"> 
     <table class="table"> 
      <thead> 
       <tr> 
        <th *ngfor="let c of cols[c.id] = g.id">ID</th> 
       </tr> 
      </thead> 
      <tbody> 
       <tr></tr> 
      </tbody> 
     </table> 
    </div> 
</ion-list> 

Answer 1

Самый простой подход к решению вашей проблемы будет написать специальный фильтр. Это может быть следующая функция в компоненте:

getColumnsForGrid(id: number): Array<{ name: string, idgrid: any }> { 
    return this.cols.filter(col => col.idgrid == id); 
} 

И в шаблоне:

<ion-list *ngfor="let g of grids"> 
     <h1>{{g.title}}</h1> 
     <div class="table-responsive"> 
      <table class="table"> 
       <thead> 
        <tr> 
         <th *ngfor="let col of getColumnsForGrid(g.id)">ID</th> 
        </tr> 
       </thead> 
       <tbody> 
        <tr> 
        </tr> 
       </tbody> 
      </table> 
     </div> 
    </ion-list> 

Вы также можете написать трубу, которая будет делать что-то подобное.