在angular8的formArray中使用ngx-mat-select-search时动态设置mat-select-options

问题描述

我有一个formArray，其中包含两个mat-selects。其中之一使用ngx-mat-select-search从mat-select选项的值中搜索。我的问题是，当表单数组包含多个元素，并且我从这些元素中选择了一个mat-select时，我搜索时所有mat-selects中的值都消失了，并且在选择了值后重新出现。 这是我的模板文件的一部分：

class AccountSerializer(serializers.ModelSerializer):
    user=serializers.StringRelatedField(read_only=False)
    class Meta:
        model=Account
        fields='__all__'
class AccountListCreateView(ListCreateAPIView):
    queryset=Account.objects.all().order_by('id').reverse()
    serializer_class=AccountSerializer
    #permission_classes=[IsAuthenticated]
    filter_backends = (SearchFilter,OrderingFilter,DjangoFilterBackend)
    parser_classes = (FileUploadParser,FormParser,MultiPartParser)
    ordering_fields = '__all__'
    search_fields = '__all__' #('user','first_name','second_name')
    #filter_class = AccountFilter

    def perform_create(self,serializer):
        user=self.request.user
        serializer.save(user=user)

class AccountDetailView(RetrieveUpdateDestroyAPIView):
    queryset=Account.objects.all()
    serializer_class=AccountSerializer
    #permission_classes=[IsOwnerProfileOrReadOnly,IsAuthenticated]
    filter_backends = (SearchFilter,MultiPartParser)

，. ts文件包含以下代码：

<ng-container formArrayName='cpUserAccounts'
                        *ngFor='let account of cpUserAccounts.controls; let i=index'>
                        <div class="d-flex align-items-center flex-wrap col-md-12" [formGroupName]='i'>
                            <div class="col-sm-6">
                                <mat-form-field class="task-array">
                                    <mat-label>Client</mat-label>
                                    <mat-select formControlName="clientId" required>
                                        <mat-option>
                                            <ngx-mat-select-search [formControl]="bankFilterCtrl"
                                                placeholderLabel='Search' noEntriesFoundLabel="'No match found'">
                                            </ngx-mat-select-search>
                                        </mat-option>
                                        <mat-option *ngFor="let client of filteredOptions | async" [value]="client.id">
                                            {{client.companyName}}
                                        </mat-option>
                                    </mat-select>
                                    <mat-hint class="error"
                                        *ngIf="findDuplicate(account.controls.clientId.value,'cpUserAccounts')">
                                        {{constants.errorMessage.duplicateClientLabel}}
                                    </mat-hint>
                                </mat-form-field>
                            </div>
                            <div class="col-sm-4">
                                <mat-form-field class="task-array">
                                    <mat-label>Role</mat-label>
                                    <mat-select formControlName="roleId" required>
                                        <mat-option *ngFor="let role of accountRoles" [value]="role.id">
                                            {{role.name}}
                                        </mat-option>
                                    </mat-select>
                                </mat-form-field>
                            </div>
                            <div class="col-sm-2 d-flex justify-content-end">
                                <mat-icon class="remove-task-button" title="Remove" (click)='removeAccount(i)'
                                    matSuffix>
                                    remove
                                </mat-icon>
                            </div>
                        </div>
                    </ng-container>

以下是发生的情况的图像： 首先，它是这样的：

然后：

问题在这里：

解决方法

由于您在filteredOptions | async中使用*ngFor元素，因此对于显示的每个“客户端”选择元素都将使用相同的选项。因此，在筛选时，它将筛选所有客户端选择框的选项，因此原来选择的值不再可用。

要解决此问题，可以将最外面的*ngFor的内容移到一个单独的组件中，该组件应实现ControlValueAccessor接口（https://angular.io/api/forms/ControlValueAccessor#description）。