用于显示和修改的角度 - 重用组件会导致@input问题？

我创建了一个显示用户信息的user组件。用于显示和修改的角度 - 重用组件会导致@input问题？

<my-user [person]="person1" (onEdit)="showEdit($event)"></my-user>

正如你所看到的，我已经发送了通过@Input()显示的值。

现在我想让用户编辑通过另一user组件此信息。

因此，当用户点击edit，我发射（通过EventEmitter）的对象到父和在父我有条件地显示编辑部分（具有相同的值）：

这是父成分：

@Component({ 
    selector: 'my-app', 
    template: ` 
    <div> Person details : <br> 

    <my-user [person]="person1" (onEdit)="showEdit($event)"></my-user> 

    <ng-template [ngIf]="isEditing" >  <----- conditional edit section 
     Edit Section: 
     <my-user #someElement ></my-user> 
    </ng-template> 

    </div> 
    `, 
})

但问题是<my-user>有@input，我不传递输入监守它有条件地显示出来。因此错误：

ERROR TypeError: Cannot read property 'id' of undefined

而且我认为它试图利用@input来自内部组件：

ID: <input [(ngModel)]="person.id" type='text' /><br>

问题

我知道我能/应该创建另一个组件编辑或使用主题订阅编辑事件 - 但仍然：
我该如何处理盟友显示相同的组件并填写（！）需要修改的值？

PLNKR

来源

2017-06-19 Royi Namir

'@input（）人：人= {};'或安全导航运算符'person？.id'？ – yurzui

https://plnkr.co/edit/voeHqFHXDvArNN4KKWtw?p=预览或克隆对象，如果你想保存/取消按钮https://plnkr.co/edit/XqjKgc4qcGZ7ret1uxjq?p=preview – yurzui

@yurzui谢谢。顺便说一句，为什么'@ViewChild（'someElement'）child''是undefined，我明确地在组件中设置了＃someElement？我希望通过这个变量填充值 –

你为什么不创建组件的过程中创建一个Person实例：

export class User { 

    @Input() person:Person = new Person(); 

    constructor() {} 
}

plnkr

来源

2017-06-19 12:12:38 PierreDuc

myne愚蠢的错误。 –

用于显示和修改的角度 - 重用组件会导致@input问题？

回答

相关问题