Question

我正在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->不要在options字段中显示它。但是使用* ngIf将更新所有选项字段。

我该如何实现？

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

但是，这有一个问题：它将从您选择它的权限中删除您的选项。如何解决？容易：检查是否选择了并且是否选择了当前能力。

（因为我还没有看完您的所有代码，所以我会想象一个函数可以返回分配给您的成员的能力，您很可能可以轻松地对其进行调整）

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

还有其他问题：请随时在评论中添加它们。

如何过滤ngfor

1 个答案: