Question

我正在尝试从我的CRUD API获取UPDATE。我知道问题出在UPDATE的表单或组件中，但我不确定我错过了什么。

表单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中：

错误类型错误：无法读取属性＆＃39; name＆＃39;未定义的

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

Answer 1

问题是，作为一个Input变量，reminders对象最初是未定义的，直到angular完成组件初始化为止。在这里看到这一行。

@Input() reminders;

然而，html部分不等待渲染，因此很早就尝试使用这个变量。

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

因此，当它在初始化过程中设置输入变量之前尝试解析模型时，它会命中一个未定义的变量并尝试在其中找到name字段，当然这个字段还不存在。< / p>

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

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

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

围绕此主题还有更多问题，例如，您可以在此处查看this一个。

希望这有帮助。

修改

所以我重新检查了你的代码，而你的updateReminder函数是表单提交，我想这是一个纯粹的更新表单。在这种情况下，我会说选项3应该正常工作。 Angular做了一些整洁的变化检测和重新渲染，所以你应该首先检查输入变量是否设置正确。如果是，角度应该完成其余部分，并在它意识到对象现在存在的那一刻重新呈现*ngIf部分。

在我们检查输入变量之前，理解角度处理输入变量的方式总是有帮助的，最终归结为所谓的 Lifecycle Hooks 。一个特殊的钩子是ngOnInit()钩子。这是关于钩子的角度documentation所说的：

在Angular首次显示数据绑定属性并设置指令/组件的输入属性后初始化指令/组件

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

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

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

作为一个比较，如果你在构造函数中这样做，你会发现它在此时仍然是空的。

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

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

Angular无法读取组件/表单

1 个答案:

修改