角形式-初始化的正确方法是什么

Question

我有一个使用3个字段构建的基本表单。 名称，说明和ID。 数据应由调用C＃API的服务填充，该服务返回JSON，然后将JSON加载到表单中。

当它打开时，我得到正确的数据，但出现此错误。 如果我删除了名称输入，则错误仅移至描述字段，然后移至ID。

我仍在学习Angular，但已经阅读了很多文章以尝试解决此问题。 我想我没事，但是我猜想这与初始化有关，因为如果在从场景服务获取数据之前添加此代码，则会出错。

  this.scenario = { 'id': 0,
    'name': '',
    'description': '',
    'dateCreated': '',
    'createdBy': '',
    'dateModified': '',
    'modifiedBy': '',
    'active': true };

那么编写此代码的正确方法是什么，以便无需硬编码即可初始化我的接口？

test.component.html

<h1>
  Edit Scenario - {{ name.value }}
</h1>
<div class='panel-body'>
<form novalidate 
      #scenarioForm="ngForm" 
      (ngSubmit)="saveForm()">
    <div class='row'>
      <div class='col-md-1'><label for="scenarioName" class="control-label">Name</label></div>
      <div class='col-md-6'>
        <div class="form-group" [class.has-error]="name.invalid && name.touched">
        <input class="form-control" 
               #name="ngModel" 
               name="scenarioName" 
               type="text" maxlength="50" placeholder="Scenario name" required 
               [(ngModel)]="scenario.name">
        </div>
      </div>
    </div>
    <div class='row'>
      <div class='col-md-1'><label for="descption">Descption</label></div>
      <div class='col-md-6'>
        <div class="form-group" [class.has-error]="description.invalid && description.touched">
          <textarea #description="ngModel" 
                    ngControl="description" 
                    class="form-control" 
                    rows="4" maxlength="500" 
                    placeholder="What is this scenario for?" 
                    required 
                    name="description" 
                    [(ngModel)]="scenario.description"></textarea>
           <div *ngIf="description.invalid && description.dirty" class="alert alert-danger">
              Description is required, and must be at least blah blah... 
          </div>
        </div>
      </div>
    </div>
  <div class='panel-footer'>
    <button class="btn btn-default" type="submit">Save</button>
  </div>
  <br><br>
  <input #id type="text" name="id" [(ngModel)]="scenario.id" #id="ngModel">
</form>
<div id="debugging">
  <br>
  Valid? {{scenarioForm.valid}}<br>
  Model: {{ scenario | json }} <br>
  Model: {{ result | json }}<br>
  Form: {{ scenarioForm.value | json }}
  <br>
</div>

test.component.ts

import { Component, OnInit, NgModule } from '@angular/core';
import { SharedModule } from './../shared/shared.module';
import { FormsModule, NgForm, FormGroup } from '@angular/forms';
import { CommonModule } from '@angular/common';
import { ScenarioService } from './scenario.service';
import { IScenario } from './scenario';
import { Router, ActivatedRoute } from '@angular/router';

 @NgModule({
   imports: [
    FormsModule
   ],
   exports: [FormsModule]
 })

@Component({
  selector: 'app-scenario-form',
  templateUrl: './test.component.html',
})

export class TestComponent implements OnInit {
  // tslint:disable-next-line:no-inferrable-types
  private pageTitle: string = 'New Scenario';
  scenario: IScenario;
  result: IScenario;

  constructor(private _scenarioService: ScenarioService,
              private _route: ActivatedRoute) {}

  ngOnInit() {
    const scenarioId = this._route.snapshot.paramMap.get('id');
    if (scenarioId) {
      this._scenarioService.getScenario(+scenarioId).subscribe(
        scenario => this.scenario = scenario);
    }
  }
}

Answer 1

由于您是从API异步获取响应，因此您需要首先处理null，因此可以使用安全的导航操作符来实现

 <input #id type="text" name="id" [(ngModel)]="scenario?.id" #id="ngModel"> 

同样适用于您的所有字段。

正如您上面提到的，另一种方式是通过初始化对象方案来修复

由于需要完成两种方式的数据绑定，因此需要通过创建实例来初始化对象

scenario: IScenarioUpdate = {modifiedBy: ''}