Angular 9，如何通过ngFor来聚焦ngselect中的特定字段

Question

我对angular&js。通过ngFor循环，我有3个ng选择。

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

我想做的是，只有在第一个下拉列表中的一些项目被选中并与第二个下拉列表的项目匹配时，才启用提交按钮。使用类似的方法

public isStepSelected(event, id) {
if (id === 0 && event) {
event.length > 0 ? this.isDisabled = false : this.isDisabled = true;
}
if(id ===1 && event){
//do something
}

我不知道该怎么做，也不知道是否有更好的方法。谢谢帮助！：(

Answer 1

在您的代码中，我添加了

[disabled]="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; 
}