如何区分具有相同ngModel的两个选择下拉列表?

Question

我有一个父组合，我正在使用子组合(过滤器(，它具有带有ngModel的选择下拉列表。 我需要在父组件中调用我的子组件两次，但问题是当我从下拉列表中选择某些内容时，它会反映自动，并在另一个选择上从子组合的第二次调用加载。我希望当我从我孩子的第一次调用中选择第一个下拉列表时，不要反映在第二个下拉列表中。

// parent compo
<app-filter [sportLeagues]="sportLeagues" [teams]="teams"></app-filter>
<app-filter [sportLeagues]="sportLeagues" [teams]="teams"></app-filter>
// child compo
<div class="league-filter">
<div>
<div class="label__parent">
<label>League filter</label>
</div>
<div class="league-filter-dropdown">
<select [ngModel]="league_id" name="league_id" id="league_id"
(ngModelChange)="selectedLeagueFilterHandler($event)">
<option *ngFor="let sportLeague of sportLeagues; index as i;" [ngValue]="sportLeague.id">
{{ sportLeague.name }}
</option>
</select>
<button class="clear-filter-btn" *ngIf="league_id"
(click)="selectedLeagueFilterHandler(null)">
Clear filter
</button>
</div>
</div>
</div>

Answer 1

在 js 值中是通过引用的。所以两个组件的体育联赛实际上是同一个变量。 如果要区分此组件引用输入，则应具有输入的 setter 和 getter，并复制输入。 然后，您可以发出所选值。

@Output selectedFilter = new EventEmitter();
_sportLeagues;
@Input set sportLeagues(val) {
this._sportLeagues = [...val];
}
get sportLeagues() {
return this._sportLeagues;
}

现在，您只需要将选定的过滤器发送到父级即可;

selectedLeagueFilterHandler() {
this.selectedFilter.emit(this.sportLeagues);
}

并在父组件中处理它：

<app-filter (selectedFilter)="filterSelected($event)" [sportLeagues]="sportLeagues" [teams]="teams"></app-filter>

Answer 2

我想问题是你@Input传递给你的"childs-compo"相同的对象或数组。因此，对象中的更改使"更改被传播"。我建议在二传手中复制数据。不了解您的代码就很难。如果我想象sportLeagues是一个对象数组，你可以在子组件中有

_sportLeagues:any[] //<--declare a new variable
@Input set sportLeagues(value)
{
this._sportLeagues=value.map(x=>{...x}) //<--in a setter make a copy
}

所以，如果你的代码的任何地方都有

this._sportLeagues=newValue //<--this change the inner array