Question

我正在尝试使用Angular 8开发一个网页，在该网页上我通过传递请求ID时得到了JSON格式的REST API的响应，我想将该数据绑定到以HTML创建的表中。我收到以下错误：

TypeError：无法读取未定义的属性“ items”。

下面是我的items.component.html

<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<input class="in" type="text" (keyup)="onKeyUp($event)">
<button class="btn" (click)="getResults()">Search Request</button>
<br>
<div class="container">           
  <table class="table">
    <thead>
      <tr>
        <th class="user_request_id">Request ID</th>
        <th class="asset_name">Asset Name</th>
        <th class="generated_path">Generated Path</th>
        <th class="match_percentage">Match Percentage</th>
      </tr>
    </thead>
    <tbody>
      <tr  *ngFor="let item of _items.items"> 
        <td>{{item.user_request_id}}</td>
        <td>{{item.asset_name}}</td>
        <td><a href="">{{item.generated_path}}</a></td>
        <td>{{item.match_percentage}}</td>
      </tr>
    </tbody>
  </table>
</div>

</body>
</html>

下面是items.component.ts文件

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { GetItemsService } from '../get-items.service';
import { Observable } from 'rxjs';

@Component({
  selector: 'app-items',
  templateUrl: './items.component.html',
  styleUrls: ['./items.component.css']
})
export class ItemsComponent implements OnInit {
  public RequestID : String;

   _items:any;
   id:String='';
   items:any;

  constructor(private service: GetItemsService) { }


  ngOnInit() {
  }
  onKeyUp(event:any){
    this.id=event.target.value;
   } 

  getResults(){
    this.service.getData(this.id).subscribe((data) => {
      console.log(data)
      this._items = data
        });
  }
}

下面是服务文件。

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class GetItemsService {
  constructor(private httpClient:HttpClient) { }

  public APIurl = 'sample.com';

  getData(iD):Observable<any>{
    return this.httpClient.get<any>(this.APIurl+iD);
  }
}

下面是JSON文件。

{
    "items": [{
        "user_request_id": 10,
        "asset_name": "XXX",
        "generated_path": "tbd",
        "match_percentage": "14.02"
    }],
    "first": {
        "$ref": "https://ords/xxdcode/xxdcoderest/xxdcodesuggestasset/10"
             }
}

Answer 1

我认为您缺少getData调用中的第一个错误参数

 getResults(){
    this.service.getData(this.id).subscribe((err,data) => {
        if (err) {
             alert("Error");
              return;
        }
      this._items = data
        });
  }

Answer 2

<div class="container" *ngif="_items">           
  <table class="table">
    <thead>
      <tr>
        <th class="user_request_id">Request ID</th>
        <th class="asset_name">Asset Name</th>
        <th class="generated_path">Generated Path</th>
        <th class="match_percentage">Match Percentage</th>
      </tr>
    </thead>
    <tbody *ngif="_items.items.length!=0">
      <tr  *ngFor="let item of _items.items"> 
        <td>{{item.user_request_id}}</td>
        <td>{{item.asset_name}}</td>
        <td><a href="">{{item.generated_path}}</a></td>
        <td>{{item.match_percentage}}</td>
      </tr>
    </tbody>
  </table>
</div>

TypeError：无法读取未定义的属性“ items”

2 个答案: