Angular4中下拉框selected屬性與ngValue(value)屬性互斥如何解決？

在做個人信息修改的時候遇到了一個問題：部分下拉框的option內(nèi)容是由后端通過json傳遞過來的，格式大概為：

{
"arriveTime":
    {
        "id":150,
        "name":"待定",
        "sort":1
    },
    {
        "id":151,
        "name":"立即",
        "sort":2,
        "selected":true
    }
}

于是我把該實體通過循環(huán)填充：

    <div class="area-int">
      <select formControlName="arriveTime">
        <option *ngFor="let a of resume.arriveTimeDic" [selected]="a.selected" [ngValue]="a">
          {{a.name}}
        </option>
      </select>
    </div>

結(jié)果發(fā)現(xiàn)只要有ngValue或是value屬性存在，selected就會失效。使用ngValue的意圖是，因為后端需要我同時把id和name兩個字段都傳過去。我使用另一種方式也同樣沒有效果：

    <div class="area-int">
      <select formControlName="arriveTime">
        <option *ngFor="let a of resume.arriveTimeDic" [selected]="a.selected" [value]="a.name">
          {{a.name}}
          <input formControlName="arriveTimeId" [value]="a.id">
        </option>
      </select>
    </div>

搜索未果，特向大神們請教，小白自學(xué)，感激不盡！

回答

編輯回答

怪痞

可以使用其他的方法解決。
1、將傳過來的數(shù)據(jù)轉(zhuǎn)化為一個數(shù)組，然后獲取被選中item的id
2、然后替換成下面的代碼：

<select [(ngModel)]="id" (ngModelChange)="change($event)">
       <option *ngFor="let a of resume.arriveTimeDic" [value]="a.id">
          {{a.name}}
        </option>
 </select>

3、重新選擇后 change($event)獲取的是 id，通過這個id從數(shù)組中獲取value。

2018年7月7日 05:10

編輯回答

真難過

遇到這種下拉框，復(fù)選框還有單選框的表單大部分情況都需要對數(shù)據(jù)格式進行一下轉(zhuǎn)換，下面是我的作法希望能提高你一點思路。
第一步，將獲取到的數(shù)據(jù)進行格式轉(zhuǎn)換，并加裝到頁面上；
js代碼

 let res={};
    for(let i=0;i<this.data.arriveTime.length;i++){
      let item=this.data.arriveTime[i];
      if(item.selected){
        res.arriveTime=item.id;
      }
    }
    this.formGroup=this.fb.group(res);

html代碼

  <div>
    <select formControlName="arriveTime">
      <option *ngFor="let item of data.arriveTime" [value]="item.id">{{item.name}}</option>
    </select>
  </div>
  <button (click)="submit()">提交</button>

第二步，提交數(shù)據(jù)的時候?qū)Ω袷竭M行轉(zhuǎn)換，轉(zhuǎn)換成滿足后臺要求的格式。

  submit(){
    let res={arriveTime:{}};
    console.log(this.formGroup.value);
    for(let i=0;i<this.data.arriveTime.length;i++){
      let item=this.data.arriveTime[i];
      if(item.id==this.formGroup.value.arriveTime){
        res.arriveTime['name']=item.name
        res.arriveTime['id']=item.id
      }
    }
    console.log(res)
  //  此處填寫你的代碼
  }

submit方法中兩次console.log的結(jié)果如下：
圖片描述