Angular4中下拉框selected属性与ngValue(value)属性互斥如何解决？

Question

在做个人信息修改的时候遇到了一个问题：部分下拉框的option内容是由后端通过json传递过来的，格式大概为：

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

于是我把该实体通过循环填充：

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

结果发现只要有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>

搜索未果，特向大神们请教，小白自学，感激不尽！

Answer 1

遇到这种下拉框，复选框还有单选框的表单大部分情况都需要对数据格式进行一下转换，下面是我的作法希望能提高你一点思路。
第一步，将获取到的数据进行格式转换，并加装到页面上；
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>

第二步，提交数据的时候对格式进行转换，转换成满足后台要求的格式。

  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的结果如下：

Answer 2

额。。。楼上已经给了你要同时传id和name的方法啦。

但是value和ngValue会影响selected没有提到。。。

有时我们需要默认选中满足条件的option，又不可能将其value置空，所以就需要value和selected同时存在。
给元素添加属性似乎还要一个办法，就是使用[attr.属性名]=''。

这里可以使用在option上使用[attr.value]='value'来和[selected]=true达到效果。

但是[attr.value]='value'和[selected]互换为[value]='value'、[attr.selected]=true就不行，不知道原因呢。。。

Answer 3

可以使用其他的方法解决。
1、将传过来的数据转化为一个数组，然后获取被选中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从数组中获取value。