如何使用 Angular 访问 JSON 中的特定对象？答案

【问题标题】：How to access specific object in JSON using Angular?如何使用 Angular 访问 JSON 中的特定对象？
【发布时间】：2021-04-07 07:20:40
【问题描述】：

我正在尝试从 API 访问某些数据，但在这样做时遇到了问题。以下是 API 中 JSON 的结构：

我想在value 中访问Name、StateName 和CityName 以遍历表。我收到明显的错误“找不到'object'类型的不同支持对象'[object Object]'。NgFor 仅支持绑定到可迭代对象，例如数组”，因为 ngFor 没有遍历数组。如何修复我的代码以迭代数据以填充我的表格？

component.ts:

@Component({
  selector: 'app-search',
  templateUrl: './search.component.html',
  styleUrls: ['./search.component.css']
})
export class SearchComponent implements OnInit {

  customer: any;

 constructor(private Service: CustomerDataService) { }

  ngOnInit(): void {
    this.getCustomerData();
  }

  public getCustomerData() {
    this.Service.getCustomers().subscribe((data)=>{
      console.log(data);
      this.customer = data;
    }) 
  }

}

HTML：

<div class="container">
    <form class="form-inline">
        <div class="input-group mb-2">
            <div class="has-clear">
                <input type="text" name="search" required class="form-control" placeholder="Name" />
                <button class="clear-data" type="reset"><i class="icon-close-bold-sm"></i></button>
            </div>
            <button type="submit" class="btn btn-primary mb-2 ml-3">Search</button>
        </div>
    </form>
    <div class="table-responsive">
        <table class="table table-striped">
            <thead>
                <tr>
                    <th scope="col">Name</th>
                    <th scope="col">City</th>
                    <th scope="col">State</th>
                </tr>
            </thead>
            <tbody>
                <tr *ngFor = "let customers of customer">
                    <td scope="row">{{customers.value.Name}}</td>
                    <td scope="row">{{customers.value.StateName}}</td>
                    <td scope="row">{{customers.value.CityName}}</td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

【问题讨论】：

标签： html angular typescript data-binding

【解决方案1】：

考虑使用 | async 直接在你的 html 中访问 observable

<tr *ngFor = "let customer of customers$ | async">
    <td scope="row">{{customer.Name}}</td>
    <td scope="row">{{customer.StateName}}</td>
    <td scope="row">{{customer.CityName}}</td>
</tr>

在你的组件中

customers$ : Observable<Customer> = this.getCustomerData();

您可以使用地图运算符更新您的getCustomerData，以返回您在 value 属性中拥有的客户列表。

【讨论】：

【解决方案2】：

值是一个数组而不是对象，所以

  public getCustomerData() {
    this.Service.getCustomers().subscribe((data)=>{
      console.log(data);
      this.customer = data.value;
    }) 
  }

在你的模板中

<tr *ngFor = "let customers of customer">
    <td scope="row">{{customers.Name}}</td>
    <td scope="row">{{customers.StateName}}</td>
    <td scope="row">{{customers.CityName}}</td>
</tr>

或者你可以编辑你的模板

<tr *ngFor = "let customers of customer.value">
    <td scope="row">{{customers.Name}}</td>
    <td scope="row">{{customers.StateName}}</td>
    <td scope="row">{{customers.CityName}}</td>
</tr>

【讨论】：