如何在 ngfor 中过滤选项答案

【问题标题】：How to filter options in ngfor如何在 ngfor 中过滤选项
【发布时间】：2019-01-14 15:35:49
【问题描述】：

我正在 Angular2+ 中创建一个应用程序。我有一个页面，一个人可以给一个人一个品质（见下图）。我正在对能力列表执行 ngFor 以创建能力和选择菜单，您可以在其中选择团队成员的能力。

然后对于每项能力，我都会在选项中执行 ngFor 以获取每个团队成员。

这是我的代码：

HTML：

<div class="row" *ngFor="let competence of competences_list">
    <div class="col-7">
        <div class="competence">{{competence}}</div>
    </div>
    <div class="col-5">
        <!-- Form control -->
        <select class="form-control select-competence" #name (change)="changeList($event , name.value, name.id)" id="{{competence}}">
            <option value="" selected disabled hidden></option>
            <option *ngFor="let member of team_list2" value="{{member.name}}">{{member.name}}</option>
            <option value=""></option>
        </select>
    </div>
</div>

打字稿：

    this.competences_list = ['Zelfstandigheid', 'Creativiteit', 'Flexibiliteit',
        'Dominantie', 'Prestatiegerichtheid', 'Netwerken', 'Durf initiatief te nemen',
        'Reflecteren', 'Zelfkennis'];

    this.team_list2 = [
        { name: 'user1', chosen: false },
        { name: 'user2', chosen: false },
        { name: 'user3', chosen: false }
    ];

问题是我想根据之前的选择过滤这些值。所以如果我选择第一个权限“user1”，“user1”一定不能显示在第二个权限的选项列表中。这里的问题是双向绑定。我尝试使用管道，但它会更新所有选项字段。

所以，如果选择 == true --> 不要在选项字段中显示它。但是使用 *ngIf 会更新所有的选项字段。

我怎样才能做到这一点？

【问题讨论】：

如何在 ngfor 中过滤选项 使用 *ngIf
@Antoniossss 使用 *ngIf 更新所有选项字段。它在一个 ngfor 循环中。
您还可以使用管道创建自定义过滤器。 angular.io/guide/pipes
@RenatoFrancia 管道对于每个选项字段都是相同的，因为上面使用了 ngFor。这个我已经试过了。

标签： angular ngfor

【解决方案1】：

我会说解决方案是使用*ngIf。

在Angular documentation 上可以看到你可以使用ng-container：

<ng-container *ngFor="let h of heroes">
  <ng-container *ngIf="showSad || h.emotion !== 'sad'">
    <option [ngValue]="h">{{h.name}} ({{h.emotion}})</option>
  </ng-container>
</ng-container>

为了适应你的代码：

<select class="form-control select-competence" #name (change)="changeList($event , name.value, name.id)" id="{{competence}}">
    <option value="" selected disabled hidden></option>
    <ng-container *ngFor="let member of team_list2">
        <ng-container *ngIf="!member.chosen">
            <option value="{{member.name}}">{{member.name}}</option>
        </ng-container>
    </ng-container>
    <option value=""></option>
</select>

但是，这有一个问题：它将从您选择的权限中删除您的选项。这个怎么卖？简单：检查是否选择了它AND是否选择了当前能力。

（因为我没有看过你所有的代码，我会想象一个函数返回分配给你的成员的能力，你很可能很容易适应它）

<select class="form-control select-competence" #name (change)="changeList($event , name.value, name.id)" id="{{competence}}">
    <option value="" selected disabled hidden></option>
    <ng-container *ngFor="let member of team_list2">
        <ng-container *ngIf="!member.chosen || member.name === getAssignedMember(competency)">
            <option value="{{member.name}}">{{member.name}}</option>
        </ng-container>
    </ng-container>
    <option value=""></option>
</select>

任何其他问题：不要犹豫，将它们添加到 cmets。

【讨论】：

我去试试，我会告诉你的