Angular 角度2选择与ngModel和@Input冲突

我对@Input和select from angular材质的传播有问题。我的选择取决于家长，并通过@Input和@output进行通信。当我选择一个选项时，我将该值发送给父对象，父对象截获该响应并验证他是否可以更改该值

如果父对象告诉子对象由于某种原因无法更新其值，我不会更改子对象输入中的值。在这种情况下，选择框中的ngModel不会反映输入的值

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

以下示例显示了孩子如何与家长沟通：

@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
        }
    }
}

@组件({
选择器：'子'，
模板：`
语义{{periode.id}
`
})
导出类子类{
@输入（）选择：任意；
@Output（）filterChange=neweventemitter（）；
过滤器选项更改（evt，类型：字符串）{
this.filterResult[type]=evt；
this.filterChange.emit（this.currentFilter）；
}
}
@组成部分({
选择器：“我的父母”，
模板：`
`
})
导出类应用程序{
选择：任何；
构造函数（）{
}
验证（事件）{
如果（真）{
//执行此操作并更改选定的值
}否则{
//不执行任何操作，并保留初始选定值
}
}
}

您需要从父组件控制选定值，并且即使需要保留以前的值，选定值的对象引用也应始终更改

@组件({
选择器：'子'，
模板：
`
{{op.name}}
{{selected.name}
`
})
导出类子类{
比较n：
（o1:any，o2:any）=>boolean=（o1:any，o2:any）=>o1&&o2？o1.id==o2.id:o1==o2；
@选择输入（）：对象；
@Output（）valueChanged=neweventemitter（）；
选项=[
{id:“1”，名称：'A'}，
{id:“2”，名称：'B'}，
{id:“3”，名称：'C:不允许'}，
{id:“4”，名称：'D'}
];
}
@组成部分({
选择器：“我的应用程序”，
模板：`
`,
})
导出类应用程序{
选定={id:“1”，名称：'A'}；
构造函数（）{
}
值已更改（值）{
//将前一个保留3分钟
如果（value.id=='3'）{
this.selected=Object.assign（{}，this.selected）；
}
否则{
//对于所有其他值，采用用户选择的值
this.selected=Object.assign（{}，value）；
}
}
}

您的

ngModelChange）

缺少左括号：

（ngModelChange）

您的解释不清楚。你能改进它吗？谢谢，我添加了一些细节，纠正了我的坏习惯。希望它更清晰，它完全符合我的要求，但有一个角度材料的问题，没有功能来比较选项与属性

@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);
     }
    }
  }