4 回答

TA貢獻1911條經驗 獲得超7個贊
我將ngModeChange輸入更改為并從訂閱內部DDModel致電您。termSelectChanged()我也[ngModel]改為[(ngModel)]
<select (ngModelChange)='termSelectChanged($event)' [(ngModel)]="selected">
<option [ngValue]="t" *ngFor='let t of termsColl'>{{t?.code}}</option>
</select>
termSelectChanged(selection: DDModel) {
console.log("HIT", selection);
}
ngOnInit() {
this.s.getOtherData().subscribe(
data => {
this.termsColl = data;
this.selected = this.termsColl[0];
this.termSelectChanged(this.selected);
},
error => {
console.error(error);
}
);
}
我無法告訴您為什么更改this.selected代碼不會觸發ngModelChange. 可能是因為ngModelChange在模板中調用了。

TA貢獻1786條經驗 獲得超11個贊
您可以使用viewToModelUpdate()
來ngModel
更新值,如果您想觸發ngModelChange
.?
但您需要進行以下更改。
在html模板中:
<select? (ngModelChange)='termSelectChanged($event)' [ngModel]="selected" #ngModel="ngModel">
? <option [value]="t" *ngFor='let t of termsColl'>{{t?.code}}</option>
</select>
您可以看到我在模板中添加了對 ngModel 的引用,我將在組件類中使用它。
在組件類中:
export class AppComponent {
? name = "Angular 6";
? version = VERSION.full;
? public termsColl: Array<DDModel>;
? public selected: string;
? @ViewChild("ngModel") ngModel: NgModel;
? constructor(private s: DDService) {}
? termSelectChanged(event) {
? ? this.selected = event;
? }
? ngOnInit() {
? ? this.s.getOtherData().subscribe(
? ? ? data => {
? ? ? ? this.termsColl = data;
? ? ? ? this.ngModel.viewToModelUpdate(this.termsColl[1]);
? ? ? },
? ? ? error => {
? ? ? ? console.error(error);
? ? ? }
? ? );
? }
}
您可以看到我正在使用ngModel引用來調用viewToModelUpdate帶有值的 ,這反過來會觸發ngModelChange.
由于您沒有直接使用雙向綁定,因此必須將值設置為selected觸發函數內的變量termSelectChanged。
希望這能幫助您實現您的要求。

TA貢獻1820條經驗 獲得超9個贊
您可以在選項元素中使用value而不是使用。ngValue并分配t.code而不是分配t給value屬性。
<select (ngModelChange)='termSelectChanged($event)' [ngModel]="selected">
<option [value]="t.code" *ngFor='let t of termsColl'>{{t?.code}}</option>
</select>
參考: https: //angular-version-xkjuff.stackblitz.io

TA貢獻1886條經驗 獲得超2個贊
termsColl 有數據,但代碼行 this.selected = this.termsColl[1]; 不會將所選選項更改為下拉列表中的第一個元素。
因為您使用的是屬性綁定 [ngModel]="selected",而不是雙向數據綁定。
[(ngModel)]="selected" 用于雙向綁定,語法由以下復合:
[ngModel]="selected" 和 (ngModelChange)="selected = $event"
另外,selected的值應該是下拉列表中可用的值,即
ngOnInit(){
this.selected = this.termsColl[1].code
}
下面的代碼適合你:
<select [(ngModel)]="selected" (change)="onSelection()">
<option *ngFor='let t of termsColl' [value]="t.code" [selected]="selected === t.code">{{t?.code}}</option>
</select>
添加回答
舉報