Angular 无法读取组件/表单中未定义的属性

Question

我正在尝试通过我的 CRUD API 使更新工作。我知道问题出在更新的表单或组件中，但我不确定我遗漏了什么。

表单 HTML

<form #form="ngForm" (ngSubmit)="updateReminder(form.value)">
  <div class="form-group">
    <label for="nameField">Name:</label>
    <input name="nameField" class="form-control" [ngModel]="reminders.name">
    <br />
    <label for="occasionField">Occasion:</label>
    <input name="occasionField" class="form-control" 
[ngModel]="reminders.occasion">
 </div>
 <button type="submit">save</button>
</form>

表单组件

import { Component, OnInit, Input } from '@angular/core';
import { ReminderService } from '../providers/reminder.service';

@Component({
  selector: 'app-results',
  templateUrl: './results.component.html',
  styleUrls: ['./results.component.css'],
  providers: [ReminderService]

})
export class ResultsComponent implements OnInit {

constructor(private reminderService:ReminderService) {}

 reminderList = null;
 @Input() reminders; 


ngOnInit() {}   


updateReminder(obj:any):void {
 this.reminders.name = obj.nameField;
 this.reminders.occasion = obj.occasionField;
 this.reminderService.updateReminder(this.reminders._id, this.reminders)
  .subscribe((result) =>{
    location.reload();
 })
}

应用组件 HTML

<div class="container">
<app-intro title="{{title}}"></app-intro>
<app-form ></app-form>
<app-results *ngFor='let reminder of reminderList' [reminders]="reminder">
</app-results>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256- FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"> 

应用组件(没有路由器)

import { Component } from '@angular/core';
import { ReminderService } from './providers/reminder.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  providers: [ReminderService]
})
export class AppComponent {

 title = 'The Amazing Reminder App';

  constructor(private reminderService:ReminderService) {}

  reminderList = null;

 ngOnInit() {
    this.reminderService.listReminders().subscribe((reminders)=>{
        this.reminderList = reminders;
    });
 } 
}

错误在 HTML 中:

错误类型错误:无法读取未定义的属性“名称”

<input name="nameField" class="form-control" [ngModel]="reminders.name">

Answer 1

问题是作为输入变量，reminders在 Angular 完成组件初始化之前，对象最初是未定义的。请在此处查看此行。

@Input() reminders;

然而，html 部分不会等待呈现，因此会尽早尝试使用此变量。

<input name="nameField" class="form-control" [ngModel]="reminders.name">

因此，当它在初始化过程中尝试在设置输入变量之前解析模型时，它会遇到一个 undefined variable 并尝试找到一个 name其中的字段，当然还不存在。

有多种方法可以解决这个问题。

1. 给出reminders object 一个默认值，甚至可能是一个空对象。我个人认为这样你牺牲内存使用来防止错误，这似乎有点不干净
2. 在您的 html 中使用 elvis 运算符作为空检查:[ngModel]="reminders?.name" .您必须在每个尝试访问提醒对象字段的字段中执行此操作，这可能是很多代码，具体取决于您的表单
3. 仅在最终设置提醒对象时才呈现表单。这可以通过简单的 *ngIf 轻松完成。在周围的 div 或表单上:<div class="form-group" *ngIf="reminders">

这可能是个人选择，但对我来说，最后一个选项似乎是最干净的。没有理由在所需值存在之前呈现您的 View ，然后在设置它们时重新呈现它。

关于这个主题还有更多问题，例如您可以查看this一个就在这里。

希望这对您有所帮助。

---

编辑

所以我重新检查了你的代码，而你的 updateReminder功能是表单提交，我猜这是一个纯粹的更新表单。在这种情况下，我认为选项 3 应该可以正常工作。 Angular 做了一些简洁的变化检测和重新渲染，所以你应该首先检查输入变量是否设置正确。如果是，angular 应该完成剩下的工作并重新渲染 *ngIf部分它意识到该对象现在存在的那一刻。

在我们检查输入变量之前，了解 Angular 如何处理输入变量总是有帮助的，这最终归结为所谓的 Lifecycle Hooks。一个特殊的钩子(Hook)是 ngOnInit()钩。这是 Angular 的 documentation说到钩子(Hook):

Initialize the directive/component after Angular first displays the data-bound properties and sets the directive/component's input properties

这基本上意味着变量作为 @Input 传输到组件不在创建组件时设置(构造函数代码)，但仅在初始化之后设置。这会导致一些执行延迟，并最终导致您在上面提到的错误。

要检查输入变量是否设置正确，我们可以将其记录到 ngOnInit() 内的控制台.

ngOnInit() {
  console.log(this.reminders);
}  

作为比较，如果您在构造函数中执行此操作，您会发现此时它仍然是空的。

constructor(private reminderService:ReminderService) {
  // should be undefined at this point
  console.log(this.reminders);
}

因此，如果提醒变量是从 ngOnInit 记录的, *ngIf方法应该可以正常工作。