第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全,請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問(wèn)題,去搜搜看,總會(huì)有你想問(wèn)的

當(dāng)組件加載到下拉菜單時(shí),為什么 ngmodelChange 事件不會(huì)觸發(fā)?

當(dāng)組件加載到下拉菜單時(shí),為什么 ngmodelChange 事件不會(huì)觸發(fā)?

回首憶惘然 2023-07-20 17:20:20
在我的 Angular 8 組件中,我向下拉控件添加了雙向綁定。風(fēng)景<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當(dāng)組件加載時(shí),它執(zhí)行 ngOnInit() 并使用數(shù)組的第一個(gè)元素設(shè)置模型綁定屬性termsColl。termsColl有數(shù)據(jù),但該行this.selected = this.termsColl[1];不會(huì)將所選選項(xiàng)更改為下拉列表中的第一個(gè)元素。事實(shí)上,當(dāng)組件加載時(shí),我期望它觸發(fā)事件ngModelChange,但它也沒(méi)有觸發(fā)事件。我在代碼中添加了alert(),但在組件加載時(shí)它沒(méi)有顯示。僅當(dāng)我從下拉列表中選擇一個(gè)選項(xiàng)時(shí)它才會(huì)顯示。ngModelChange如何更改代碼以便在組件加載時(shí)執(zhí)行該事件?這是我的 stackblitz https://stackblitz.com/edit/angular-version-yeg27j?file=src%2Fapp%2Fapp.component.ts
查看完整描述

4 回答

?
Smart貓小萌

TA貢獻(xiàn)1911條經(jīng)驗(yàn) 獲得超7個(gè)贊

我將ngModeChange輸入更改為并從訂閱內(nèi)部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);

      }

    );

  }

我無(wú)法告訴您為什么更改this.selected代碼不會(huì)觸發(fā)ngModelChange. 可能是因?yàn)閚gModelChange在模板中調(diào)用了。


查看完整回答
反對(duì) 回復(fù) 2023-07-20
?
Qyouu

TA貢獻(xiàn)1786條經(jīng)驗(yàn) 獲得超11個(gè)贊

您可以使用viewToModelUpdate()來(lái)ngModel更新值,如果您想觸發(fā)ngModelChange.?

但您需要進(jìn)行以下更改。

在html模板中:

<select? (ngModelChange)='termSelectChanged($event)' [ngModel]="selected" #ngModel="ngModel">

? <option [value]="t" *ngFor='let t of termsColl'>{{t?.code}}</option>

</select>

您可以看到我在模板中添加了對(duì) 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引用來(lái)調(diào)用viewToModelUpdate帶有值的 ,這反過(guò)來(lái)會(huì)觸發(fā)ngModelChange.


由于您沒(méi)有直接使用雙向綁定,因此必須將值設(shè)置為selected觸發(fā)函數(shù)內(nèi)的變量termSelectChanged。


希望這能幫助您實(shí)現(xiàn)您的要求。


查看完整回答
反對(duì) 回復(fù) 2023-07-20
?
慕妹3146593

TA貢獻(xiàn)1820條經(jīng)驗(yàn) 獲得超9個(gè)贊

您可以在選項(xiàng)元素中使用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


查看完整回答
反對(duì) 回復(fù) 2023-07-20
?
MM們

TA貢獻(xiàn)1886條經(jīng)驗(yàn) 獲得超2個(gè)贊

termsColl 有數(shù)據(jù),但代碼行 this.selected = this.termsColl[1]; 不會(huì)將所選選項(xiàng)更改為下拉列表中的第一個(gè)元素。


因?yàn)槟褂玫氖菍傩越壎?[ngModel]="selected",而不是雙向數(shù)據(jù)綁定。


[(ngModel)]="selected" 用于雙向綁定,語(yǔ)法由以下復(fù)合:


[ngModel]="selected" 和 (ngModelChange)="selected = $event"


另外,selected的值應(yīng)該是下拉列表中可用的值,即


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>


查看完整回答
反對(duì) 回復(fù) 2023-07-20
  • 4 回答
  • 0 關(guān)注
  • 329 瀏覽
慕課專欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購(gòu)課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)