Question

我正在尝试根据相应格式的ID获取文档“ TypeError：无法读取未定义的属性'id'” 响应中出现错误：单击按钮的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仅支持绑定到数组等Iterable。

Answer 1

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

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

执行此操作的其他方法可能是将Observable直接传递（无需调用.subscribe）到DOM，并使用异步管道。

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

注意：

此外，您可以使用location.back()返回上一个网址，而不用创建路由方法。我知道，没有话题，只是为了让你知道！

编辑：

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

Answer 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">

给出TypeError的角度：“无法读取未定义的属性'id'”

2 个答案: