Question

我需要根据父* ngFor的当前值进行条件收集。

g.id是网格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>

你也可以编写一个类似的管道。

Angular2 - 使用条件集合生成* ngFor

1 个答案: