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

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

如果要绑定到name属性。

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

如果要绑定到input的值，则需要将ngModel与双向绑定一起使用。

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

Answer 2

您应该使用[(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 - 属性，因为它对于模板驱动的表单非常重要。您还应将FormsModule导入app.module.ts。

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

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

父控制器的角度模型数据

问题

2 个答案: