Angular：错误-TS2339：类型“{}”上不存在属性“名称”[关闭]答案

【问题标题】：Angular: error- TS2339: Property 'name' does not exist on type '{}' [closed]Angular：错误-TS2339：类型“{}”上不存在属性“名称”[关闭]
【发布时间】：2020-09-09 03:38:46
【问题描述】：

我知道你们中的许多人会说这是一个重复的问题，但我的担忧有所不同。我想在我的网页上显示从 jsonplaceholder.com 获得的虚假 API 的数据。我创建了一个使用该 API 的服务，以下是我的文件和错误。

error- TS2339: Property 'name' does not exist on type '{}'.

api.service.ts：

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

@Injectable({
  providedIn: 'root'
})
export class ApiService {

  constructor(private _http:HttpClient) { }
  names(): Observable<any>{
    return this._http.get('https://jsonplaceholder.typicode.com/users');
  }
}

component.ts:

import { Component, OnInit,Input } from '@angular/core';
import { MessageserviceService } from '../services/messageservice.service';
import { ApiService } from '../api.service';
import { Observable } from 'rxjs';
@Component({
  selector: 'app-child',
  templateUrl: './child.component.html',
  styleUrls: ['./child.component.scss']
})
export class ChildComponent implements OnInit {
  childdata;
  itemname;
  price:boolean=false;
  list={};
  constructor(private http:ApiService) { }

  ngOnInit():any {
    this.http.names().subscribe(data=> this.list=data)
  }
}

component.html:

<ul>
    <li>{{list.name}}</li>
</ul>

【问题讨论】：

list={} .name，不是列表（或数组）。此外，您似乎并不关心 API 响应的类型，请阅读angular.io/guide/http#requesting-a-typed-response

标签： angular typescript

【解决方案1】：

你在响应中得到的是一个数组而不是一个对象，为了显示这些细节，你需要使用ngFor

<ul>
    <li *ngFor="let listObj of list">
      {{ listObj?.name}}
    </li>
 </ul>

【讨论】：

OP 报告了一个 TypeScript 编译器错误，它早在 API 响应（甚至请求）之前就出现了。 list 的初始值不是一个数组，所以如果他们尝试 ngFor 循环它会看到错误。

【解决方案2】：

那是因为list 是一个数组。 jsonplaceholder返回的数据，经过AngularHttpClient解析后，会转换成需要手动遍历的javascript数组。

您可以通过更改 app.component.html 中的代码以循环数组来实现：

<ul *ngFor="let itm of list">
    <li>{{itm.name ? itm.name : ''}}</li>
</ul>

如果您不想使用三元运算符，您可以随时使用pipe

【讨论】：

同样：stackoverflow.com/questions/63800267/…