亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

當組件加載到下拉菜單時,為什么 ngmodelChange 事件不會觸發?

當組件加載到下拉菜單時,為什么 ngmodelChange 事件不會觸發?

回首憶惘然 2023-07-20 17:20:20
在我的 Angular 8 組件中,我向下拉控件添加了雙向綁定。風景<select  (ngModelChange)='termSelectChanged($event)' [ngModel]="selected">  <option [ngValue]="t" *ngFor='let t of termsColl'>{{t?.code}}</option></select>組件代碼export class AppComponent implements OnInit{     public termsColl : Array<DDModel>;     public selected : DDModel;           constructor( private s : DDService ){}          termSelectChanged( event  ){                alert('HIT');    }              ngOnInit(){                //service call #1        this.s.getDataForComplexBind().subscribe(  data => {          this.termsColl = data;                 }, error => error );            //service call #2        this.s.getOtherData(  ).subscribe( data => {                    //model changes here          this.selected = this.termsColl[1];                  }, error => {  console.error(error);  });                        }} Selected當組件加載時,它執行 ngOnInit() 并使用數組的第一個元素設置模型綁定屬性termsColl。termsColl有數據,但該行this.selected = this.termsColl[1];不會將所選選項更改為下拉列表中的第一個元素。事實上,當組件加載時,我期望它觸發事件ngModelChange,但它也沒有觸發事件。我在代碼中添加了alert(),但在組件加載時它沒有顯示。僅當我從下拉列表中選擇一個選項時它才會顯示。ngModelChange如何更改代碼以便在組件加載時執行該事件?這是我的 stackblitz https://stackblitz.com/edit/angular-version-yeg27j?file=src%2Fapp%2Fapp.component.ts
查看完整描述

4 回答

?
Smart貓小萌

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在模板中調用了。


查看完整回答
反對 回復 2023-07-20
?
Qyouu

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。


希望這能幫助您實現您的要求。


查看完整回答
反對 回復 2023-07-20
?
慕妹3146593

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


查看完整回答
反對 回復 2023-07-20
?
MM們

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>


查看完整回答
反對 回復 2023-07-20
  • 4 回答
  • 0 關注
  • 309 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號