来自父控制器的角度模型数据

Question

我有一个控制器，在它的模板中我将数据传递给孩子：

    <app-lexema-item [lexema]="lexema"></app-lexema-item>

子控制器是：

@Component({
  selector: 'app-lexema-item',
  templateUrl: './lexema-item.component.html',
  styleUrls: ['./lexema-item.component.css']
})
export class LexemaItemComponent implements OnInit {
  @Input() lexema: Lexema;
  constructor() {}
  ngOnInit() {}
}

及其模板：

<div class="container">
  <div class="row">
    <div class="col-xs-10">
      <p>
        <br/> {{ lexema.name }} ({{ lexema.type }})
      </p>
    </div>
  </div>
</div>

数据正确传递并注入子控制器。

问题

下一步我尝试为lexema-item.component.html添加输入：

    <input type="text" ngModel name="lexema.name">

但它不起作用。我知道问题在于在名称字段中使用lexema.name，但我不知道如何处理它（我尝试了其他不同的情况name=[(lexema.name)]，name="[(lexema.name)]"）但没有成功。

有什么酷炫优雅的解决方案吗？

Answer 1

您应该使用[(ngModel)] 而不是name=[(lexema.name)]。提示：如果您在控制台中遇到未定义的错误，请将[(ngModel)]="lexema.name" 挂到[(ngModel)]="lexema?.name"。

改变这个：

 <input type="text" ngModel name="lexema.name">

到这里：

 <input type="text" [(ngModel)]="lexema.name" name="name">

通过使用[(ngModel)]，您必须使用name-attribute，因为它对于模板驱动的表单很重要。您还应该将FormsModule 导入到您的 app.module.ts 中。

import { FormsModule } from '@angular/forms';

有关更多信息，请阅读有关 template driven forms 的官方 Angular 文档。

Answer 2

首先你会得到一个未定义元素的错误，因为输入绑定将在标记初始化之后进行。因此，首先我们需要确保在分配输入时我们的元素是可见的。

如果要绑定到name 属性。

<input type="text" ngModel name="{{ lexema?.name }}">

如果你想绑定到input的值，你需要使用ngModel和双向绑定。

<input type="text" [(ngModel)]="lexema?.name">