Question

我正在研究这个angular2项目，其中我有一个DemoComponent，它接受输入作为数组＆amp;是ExampleComponent的子组件：

@Component({
 selector:'demo',
 template:`
  <ul>
      <li *ngFor="let item of values;let i=index" (click)="deleteArrayItem(values,i)">
         {{item.name}}
      </li>
  </ul>
 `
})
export class DemoComponent{
    @Input('values') values:Array<any>;
    constructor(){
    }
    deleteArrayItem(data:Array<any>,index:number){
       data.splice(index,1);
       console.log(data);        
    }
}

现在，在父模板中，我将数组传递给此组件：

<demo [values]="items"></demo>

到目前为止演示组件正确地在列表中加载数组元素。当我在单击它后删除元素时，我可以看到在控制台中删除了值。但它没有反映在UI中。

只有在我折叠了DemoComponent并再次打开它后，才会在UI中反映出来。

我尝试了<demo [(values)]="items"></demo>但我收到了错误：

无法分配给参考或变量

PS。这个演示组件＆amp; ExampleComponent使用angular2中的动态组件加载器加载，如下所示：

ngAfterViewInit() {
let componentIndex = this.keysRegister.indexOf('ExampleComponent');
this.dcl.loadNextToLocation(this.typesRegister[componentIndex],
  this.target).then(ref => {
    this.componentRef = ref;      
    this.updateModel();
  });
console.log('Generic Component...ExampleComponent... Loaded");
}
updateModel() {
    if(!this.componentRef) return;
    this.componentRef.instance.componentModel = this.componentModel;
}

更改数组变量后，angular2视图未更新

0 个答案: