javascript - Angular - 重用组件进行显示和修改会导致@input问题吗？

Question

我创建了一个user显示用户信息的组件。

 <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

Answer 1

为什么不在创建组件期间创建一个 Person 实例:

export class User {

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

  constructor() {}
}

plnkr