Angular 2中的类模型不起作用

Question

I have a small problem.

I declare a class ITask.

Then import it to component CreateTask. Create a variable taskSend = new ITask();

And log it in ngOnInit(), it don't have some properties of class ITask.

In View have some error : CreateTaskComponent.html:9 ERROR TypeError: Cannot read property 'Name' of undefined

Update:

File 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

read the error. 'Name' is a property from ITaskModel, and ITask has was a property of that type. On ITask use the constructor to instantiate the other classes you also defined.

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

Answer 2

Your iTask class doesn't contain a property called Name . But you are trying to access it in your html. on line no. 9

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

This is the issue. To resolve it either add Name property to iTask or change the ngModel binded variable.