Question

我正在尝试使用以下component.html

访问JSON数据

<table>
    <thead>
        <tr>
            <th>name</th>
            <th>website</th>
        </tr>
    </thead>
    <tbody>
        <tr *ngFor="let d of users1">
            <td>{{users1.id}}</td>
            <td>{{users1.email}}</td>
    </tbody>
</table>

我能够在HTML中正确访问字符串变量，但我认为获取JSON数据会有些延迟。
我的service.ts看起来像这样：

export class DataService {
  constructor(private http: HttpClient) { }
  users: string[] = ['jgfjyghj', 'gjygh'];

  getUser() {
    return this.users[0];
  }

  getUsersJ() {
    return this.http.get('https://jsonplaceholder.typicode.com/users')
  }
}

component.ts看起来像这样：

export class ListTasksComponent implements OnInit {
  users1: any;
  user: string;
  constructor(private dataservice: DataService) { }

  ngOnInit() {

    this.dataservice.getUsersJ().subscribe(data => {
      this.users1 = data;
      console.log(this.users1);
    });
    this.user = this.dataservice.getUser();

  }
}

Answer 1

您的问题是您在users1中使用了*ngFor。

您应该使用在let中定义的内容-在这种情况下为d。

<table>
    <thead>
        <tr>
            <th>name</th>
            <th>website</th>
        </tr>
    </thead>
    <tbody>
        <tr *ngFor="let d of users1">
            <td>{{d.id}}</td>
            <td>{{d.email}}</td>
    </tbody>
</table>

请参见stackblitz

无法在html中访问json数据

1 个答案: