給出TypeError的角度：“無法讀取未定義的屬性'id'”

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>

我收到的錯誤是找不到類型為“名稱”的其他支持對象“ [object Object]”。 NgFor僅支持綁定到Iterables，例如數組。

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"

同時在div上添加if檢查

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