Ограничить отображение таблицы на угловой 4

Question

пожалуйста, может кто-нибудь помочь мне контролировать отображение моего стола? Я объясню ... вот мой код:

    <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

Попробуйте это:

     <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 2

Эй, я думаю, вы можете упростить свой код, используя 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

Answer 3

в HTML

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

...

в ТС

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.