angular下拉框中的默认值失效

1 场景

使用angualr的模态窗口载入一个组件时，组件通过ngModel绑定的下拉框的默认值失效了。

2 展示

1 用模态窗口载入组件

channelProvider: {} 是一个空值，在载入组件时把这个值传递给组件中的channelProvider

  add() {
    
    
    this.modal.createStatic(ChannelProviderEditComponent, {
    
     channelProvider: {
    
    } }, this.options)
      .subscribe(() => this.resetTableList());
  }

2 组件中的下拉框（html）

 <div nz-col [nzSpan]='12'>
        <nz-form-item>
          <nz-form-label [nzSpan]='6' nzRequired>渠道商标识码</nz-form-label>
          <nz-form-control [nzSpan]='16' nzHasFeedback nzErrorTip='请选择渠道商标识码'>
            <nz-select nzPlaceHolder='请选择渠道商标识码' name='identity' [(ngModel)]='channelProvider.identity' required>
              <nz-option *ngFor='let identity of providerIdentity' [nzLabel]='identity.label'
                         [nzValue]='identity.value'></nz-option>
            </nz-select>
            <div class='fontColor'>注意：请选择渠道商对应的正确标识码，否则会导致账号请求错误的渠道商协议！</div>
          </nz-form-control>
        </nz-form-item>
      </div>
    </div>

3 组件中的值（TS）

这里给下拉框赋默认值mobile

channelProvider: any = {
    
    
    identity: 'mobile',
  };
  
 providerIdentity = [
    {
    
     value: 'mobile', label: '移动' },
    {
    
     value: 'unicom', label: '联通' },
    {
    
     value: 'telecom', label: '电信' },
    {
    
     value: 'mobileNorth', label: '移动北向' },
  ];

4 解析问题

如果在正常情况下页面展示时下拉框是会有初始值的，但是因为在我们通过模态框载入组件时给channelProvider：{}赋值了一个空值。
即我们这个空值，把原来channelProvider中identity: 'mobile',的值给覆盖掉了，所以下拉框的默认值无法展示。

1. 原来组件的channelProvider有初始值。
2. 用模态窗口载入组件时会对组件中的属性赋值，在这个时候如果我们传入的是channelProvider：{}在这里就会导致展示的界面中下拉框没有默认值。
3. 在模态窗口载入完组件之后，angular生命周期中的ngOnInit()函数就启动了，如果在此时对组件中的属性channelProvider.identity赋值的话那么就会把通过模态窗口传递过来的值再给覆盖了。

5 解决方案

1 在模态框调用组件的时候进行赋值

 add() {
    
    
    this.modal.createStatic(ChannelProviderEditComponent, {
    
     channelProvider: {
    
    identity: 'mobile'} }, this.options)
      .subscribe(() => this.resetTableList());
  }

2 在模态框调用组件的时候不进行赋值，直接使用组件的默认值。

 add() {
    
    
    this.modal.createStatic(ChannelProviderEditComponent, {
    
     channelProvider: {
    
    } }, this.options)
      .subscribe(() => this.resetTableList());
  }

3 在ngOnInit()中给channelProvider.identity赋值

  ngOnInit() {
    
    
    console.log(this.channelProvider.identity);
    this.channelProvider.identity = 'mobile';
  }