Angular 2选择与ngModel和@Input冲突

2019年7月2日 265次阅读

我在传播@Input和从角度材料中选择时遇到问题.我的选择取决于父级,并通过@Input和@Ouput进行通信.当我选择一个选项时,我会将值发送给父母,父母会拦截此回复并验证他是否可以更改该值.

在父母告诉孩子由于某种原因无法更新其值的情况下,我不会更改子项的输入中的值.在这种情况下,选择框中的ngModel不会反映Input的值.

我需要一种方法告诉我的孩子回到输入中已经存在的初始值

显示孩子如何与父母沟通的示例：

@Component({
    selector: 'child',
    template: `
        <md-select placeholder="Périodes" name="Périodes"
            [ngModel]="selected" (ngModelChange)="filterOptionsChange($event, 'periode')">
            <md-option *ngFor="let periode of periodes" [value]="periode">
                Semaine {{periode.id}}
            </md-option>
        </md-select>`
})
export class Child {

    @Input() selected: any;
    @Output() filterChange = new EventEmitter<any>();

    filterOptionsChange(evt, type: string) {
        this.filterResult[type] = evt;
        this.filterChange.emit(this.currentFilter);
    }
}

@Component({
    selector: 'my-parent',
    template: `
        <div>
            <child [selected]="selected" (valueChanged)="validate($event)"></child>
        </div>`
})
export class App {
    selected:any;

    constructor() {
    }

    validate(event) {
        if (true) {
            // do that and change the selected value
        } else {
            //do nothing, and keep the initial selected value
        }
    }
}

最佳答案 您需要控制父组件中的选定值,并且应始终更改所选值的对象ref,即使我们需要保留先前的值.

https://plnkr.co/edit/YrTTScdjOnFvwUYO1OWR?p=preview

@Component({
    selector: 'child',
    template: 
    `
  <select #el (ngModelChange)="valueChanged.emit($event)" [ngModel]="selected"  [compareWith]="compareFn">
    <option *ngFor="let op of options"  [ngValue]="op">
       {{op.name}}
    </option>
  </select>
  {{selected.name}}
    `
  })
  export class Child {
    compareFn:
        (o1: any, o2: any) => boolean = (o1: any, o2: any) => o1 && o2? o1.id === o2.id: o1 === o2;
    @Input() selected: Object;
    @Output() valueChanged = new EventEmitter<any>();

    options = [
      {id:"1", name:'A'},
      {id:"2", name: 'B'},
      {id:"3", name:' C: Do not allow'},
      {id:"4", name:' D'}
    ];
  }

  @Component({
    selector: 'my-app',
    template: `
      <div>
        <child [selected]="selected" (valueChanged)="valueChanged($event)"></child>
      </div>
    `,
  })
  export class App {
    selected = {id:"1", name: 'A'};

    constructor() {
    }

    valueChanged(value) {
     // keep the previous for 3
     if(value.id === '3') {
       this.selected= Object.assign({}, this.selected);
     }
     else {
        // for all other values take that user selected
        this.selected= Object.assign({}, value);
     }
    }
  }
点赞