Angular 2中的类模型无效

时间:2018-06-18 08:23:05

标签: angular angular6

我有一个小问题。

我宣布了一个ITask类。

Class ITask in file Task Model

然后将其导入component CreateTask。创建变量taskSend = new ITask();

enter image description here

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

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

enter image description here

更新

档案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>

2 个答案:

答案 0 :(得分:0)

阅读错误。 'Name'是来自ITaskModel的属性,而ITask是该类型的属性。 在ITask上使用构造函数来实例化您也定义的其他类。

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

答案 1 :(得分:0)

您的iTask课程不包含名为Name的媒体资源。但是你试图在你的HTML中访问它。在线号码9

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

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