Class Angular 2 中的模型不工作

Question

有个小问题

我声明一个 class ITask。

然后导入到componentCreateTask。创建一个变量 taskSend = new ITask();

并将其记录在 ngOnInit() 中，它没有 class ITask 的某些属性。

在视图中有一些错误：CreateTaskComponent.html:9 ERROR TypeError: Cannot read property 'Name' of undefined

更新：

文件create-task.component.html

<div class="create-task-page container mt-4">
  <div class="d-block my-3">
    <h2 class="page-title my-3">{{ 'PAGES.TASK.HEADING.CREATE_TASK' | translate }}</h2>
  </div>
  <section class="mt-3">
    <form>
      <div class="form-group">
        <label for="task_name">{{ 'PAGES.TASK.LABEL.TASK_NAME' | translate }}</label>
        <input type="text" class="form-control" id="task_name" aria-describedby="taksHelp" [(ngModel)]="taskSend.task.Name" placeholder="{{ 'PAGES.TASK.PLACEHOLDER.TASK_NAME' | translate }}">
        <small id="taksHelp" class="form-text text-muted">{{ 'PAGES.TASK.HINT.TASK_NAME' | translate }}</small>
      </div>
      <div class="form-group">
        <label for="description">{{ 'PAGES.TASK.LABEL.DESCRIPTION' | translate }}</label>
        <td-text-editor value="content" [options]="options"></td-text-editor>
      </div>
      <div class="form-group">
        <label for="tags">{{ 'PAGES.TASK.LABEL.TAGS' | translate }}</label>
        <input type="text" class="form-control" id="tags" placeholder="{{ 'PAGES.TASK.PLACEHOLDER.TAGS' | translate }}" />
      </div>
      <button type="submit" class="btn btn-primary">{{ 'SYSTEM.ACTIONS.LABEL.SUBMIT' | translate }}</button>
    </form>
  </section>
</div>

Answer 1

读取错误。 'Name' 是来自 ITaskModel 的属性，而 ITask 是该类型的属性。在 ITask 上，使用构造函数实例化您还定义的另一个类。

https://www.typescriptlang.org/docs/handbook/classes.html

Answer 2

您的 iTask class 不包含名为 Name 的属性。但是您正在尝试在 html 中访问它。在线号9

[(ngModel)]="taskSend.task.Name"

这就是问题所在。要解决它，请将 Name 属性添加到 iTask 或更改 ngModel 绑定变量。

Class Angular 2 中的模型不工作

Class Model in Angular 2 not working

angular

angular6