Angular给出TypeError：“无法读取未定义的属性'id'”答案

【问题标题】：Angular giving TypeError: "Cannot read property 'id' of undefined"Angular给出TypeError：“无法读取未定义的属性'id'”
【发布时间】：2019-08-11 14:11:22
【问题描述】：

我正在尝试根据相应表单的 id 获取文档 "TypeError: Cannot read property 'id' of undefined" 响应中出现错误：按钮点击的html如下：

                <div class="form-group row">
                <div class="col-md-12" style="text-align: center;">
                  <button (click)="onNext(i)" type="submit" class="btn btn-primary shadow" style="float: right;">NEXT</button>
                </div>
            </div>

而我各自的.ts文件如下图：

import { Component, OnInit } from '@angular/core';
import { UsersService } from 'src/app/services/users.service';
import { Router, ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-admin-higherstudies-form',
  templateUrl: './admin-higherstudies-form.component.html',
  styleUrls: ['./admin-higherstudies-form.component.scss'],
  providers: [UsersService]
})
export class AdminHigherstudiesFormComponent implements OnInit {
  formData: any[];
  constructor(private userService: UsersService, private router: Router, private activatedRoute: ActivatedRoute) { }

  ngOnInit() {
    let formId = this.activatedRoute.snapshot.paramMap.get('formId');
    this.userService.gethigherStudiesFormList(formId).subscribe(
      response => {
        this.formData = response;
        console.log(response);
      }
    );
  }

  logout() {
    return this.userService.logout();
  }
  Back() {
    this.router.navigate(['/admin-higher-studies']);
  }

  onNext(i) {
    let path = '/admin-higherstudies-documents' + this.formData[i].id;
    this.router.navigate([path]);
  }
}

我的服务代码如下：

  gethigherStudiesphdDocumentsList(formid): Observable<any> {
const httpoptions = {
  headers: new HttpHeaders({ 'Authorization': 'token ' + localStorage.getItem('token') })
};
return this.http.post('http://127.0.0.1:8000/api/higher-studies-phd-documents/' + formid + '/', httpoptions);

}

当我尝试在代码中提到的按钮 div 类中使用 ngFor 时：

                <div class="form-group row">
                <div class="col-md-12" *ngFor="let data of formData index as i" style="text-align: center;">
                  <button (click)="onNext(i)" type="submit" class="btn btn-primary shadow" style="float: right;">NEXT</button>
                </div>
            </div>

我收到的错误是 找不到类型为“名称”的不同支持对象“[对象对象]”。 NgFor 只支持绑定到数组等 Iterables。

【问题讨论】：

标签： angular

【解决方案1】：

这是因为你的模板在它真正有价值之前尝试访问formData，因为异步任务必须在运行之前等待，否则会弹出错误。

将 <div *ngIf="formData> 添加到父 div，这样您就可以告诉 angular 在呈现 HTML 之前等待 formData 获取值，因此等待异步方法。

其他方法可以将 Observable 直接传递（不需要调用 .subscribe）到 DOM，并使用异步管道

let data of (formData |async) index as i 并在您的组件中简单地使 formData 成为可观察的

注意：

还有，您可以使用location.back() 返回上一个url，而不是创建路由方法。我知道，跑题了，只是想让你知道！

编辑：

还有一件事要注意...通常当您收到“无法读取未定义的属性”错误时，通常意味着它试图访问不存在的东西（想到错别字），或者试图访问在它存在之前的东西！

【讨论】：

或者如果你不想添加额外的 DOM 元素，你也可以使用 <ng-container *ngIf="formData" > ... </ng-container> 而不是 div （这里有详细信息，但我用这些从条件无用中节省了很多 DOM 树的可读性生成的结构）
我将按钮 div 更改如下：

现在它给出了错误“ InvalidPipeArgument: '[object Object]' for pipe 'AsyncPipe'”
要使用异步管道，你必须传递一个 Observable.. 这意味着 formatData 没有订阅......但是如果你现在很难使用 rxjs，请坚持你所做的。 .. 另外，将 *ngIf 添加到 *ngFor 的父对象中（不能将 ngIf 和 ngFor 添加到同一个元素）希望它有效

【解决方案2】：

你的循环应该是这样的：

*ngFor="let data of formData; let i = index"

或

*ngFor="let data of formData; index as i"

另外添加一个if 检查div

<div *ngIf="formData.length > 0" class="form-group row">

【讨论】：