限制 table 在 angular 上的显示 4

Question

有人可以帮我控制 table 的显示吗？我自己解释一下……这是我的代码：

    <div class="table-responsive">
            <table class="table table-hover" id="customers">
                <thead>
                    <tr>
                        <th>Client N°</th>
                        <th>Nom</th>
                        <th>Prénom</th>
                        <th>Adresse</th>
                        <th>Date de Naissance</th>
                        <th>Téléphone</th>
                        <th>Ajoute Par</th>
                    </tr>
                </thead>
                <tbody>
                    <tr *ngFor="let c of clients" class="table-active" style="cursor: pointer;">
                        <td>{{c.id}}</td>
                        <td>{{c.nom}}</td>
                        <td>{{c.prenom}}</td>
                        <td>{{c.adresse}}</td>
                        <td>{{c.date_naissance}}</td>
                        <td>{{c.portable}}</td>
                        <td>{{c.user_id}}</td>
...

此代码允许我显示数据库中的所有客户。但是我现在想显示每个 user_id 等于 1 的客户。

希望我已经说清楚了，有人可以告诉我在 angular 4 HTML 中是否可行吗？如果是的话，你能告诉我怎么做吗？我想我会使用像 NgIf 但我不确定。

提前致谢。

Answer 1

在HTML

<tbody>
    <tr *ngFor="let c of filteredClients" class="table-active" style="cursor: pointer;">

...

在 TS

filteredClients: any[];
clients: any[];

getClients() {
    this.service.getCLients().subscribe(res => {
        this.clients = res;
        this.filteredClients = clients.filter(client => client.id == 1);    
        // this could be used for further filtering, suppose you have an input to filter other things as well.
    });
}

您也可以像您提到的那样使用 *ngIf，但更好地控制来自 TS 的数据。

Answer 2

试试这个：

     <tbody>
        <ng-template *ngFor="let c of clients">
            <tr class="table-active" style="cursor: pointer;" *ngIf="c.user_id==1">
                <td>{{c.id}}</td>
                <td>{{c.nom}}</td>
                <td>{{c.prenom}}</td>
                <td>{{c.adresse}}</td>
                <td>{{c.date_naissance}}</td>
                <td>{{c.portable}}</td>
                <td>{{c.user_id}}</td>
            </tr>
        </ng-template>
    </tbody>

Answer 3

嘿，我认为您可以使用 ng-repeat 简化代码

<tr  ng-repeat="c in clients|filter:{c.id:1}" class="table-active" style="cursor: pointer;">
                        <td>{{c.id}}</td>
                        <td>{{c.nom}}</td>
                        <td>{{c.prenom}}</td>
                        <td>{{c.adresse}}</td>
                        <td>{{c.date_naissance}}</td>
                        <td>{{c.portable}}</td>
                        <td>{{c.user_id}}</td>
</tr

限制 table 在 angular 上的显示 4

Restrict the display of a table on angular 4

angular

angular4-forms