Angular 9，如何通过 ngFor 聚焦 ng-select 中的特定字段答案

【问题标题】：Angular 9, how to focus specific field in ng-select through ngForAngular 9，如何通过 ngFor 聚焦 ng-select 中的特定字段
【发布时间】：2021-04-23 17:58:44
【问题描述】：

我对 Angular 和 js 很陌生。我的 ngFor 循环有 3 个 ng-select。

<div class="filter-input" *ngFor="let input of data; let i = index">
                    <div class="subtitle">{{ input.title | translate }}</div>
                    <ng-select
                    class="ng-select"
                    bindLabel="{{ input.bindLabel }}"
                    bindValue="{{ input.bindLabel }}"
                    [items]="input.data"
                    [multiple]="input.multiple"
                    [clearable]="input.clearable"
                    [searchable] = "input.searchable"
                    groupBy="{{ input.groupBy }}"
                    [selectableGroup]="input.selectableGroup"
                    [selectableGroupAsModel]= "input.selectableGroupAsModel"
                    [addTag]="input.addTag"
                    (change)="isStepSelected($event, i)"
                    [(ngModel)]="input.selection">

                    </ng-select>

That i want to do is to enabled the submit button only if some items from the first dropdown are selected and matching with the items from the 2nd dropdown.使用类似的方法

public isStepSelected(event, id) {

        if (id === 0 && event) {
            event.length > 0 ? this.isDisabled = false : this.isDisabled = true;
        }

        if(id ===1 && event){
           //do something
        }

我不知道如何执行此操作，或者是否存在更好的方法来执行此操作。谢谢帮助！ :)

【问题讨论】：

标签： angular

【解决方案1】：

我在你的代码中添加了

[禁用]="i > selectedValue"

在 html 代码中。

<div class="filter-input" *ngFor="let input of data; let i = index">
                    <div class="subtitle">{{ input.title | translate }}</div>
                    <ng-select
                    class="ng-select"
                    bindLabel="{{ input.bindLabel }}"
                    bindValue="{{ input.bindLabel }}"
                    [items]="input.data"
                    [multiple]="input.multiple"
                    [clearable]="input.clearable"
                    [searchable] = "input.searchable"
                    groupBy="{{ input.groupBy }}"
                    [selectableGroup]="input.selectableGroup"
                    [selectableGroupAsModel]= "input.selectableGroupAsModel"
                    [addTag]="input.addTag"
                     [disabled] = "i > selectedValue"
                    (change)="isStepSelected(i)"
                    [(ngModel)]="input.selection">

                    </ng-select>
</div>

并添加了一个变量并增加了值。改变时。

selectedValue = 0;

public isStepSelected(value) {
 value++;
 this.selectedValue = value; 
}

【讨论】：