Данные JSON не доступны в HTML

Question

Я пытаюсь получить доступ к данным JSON с помощью следующего component.html

<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.
My 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>

См. стекблиц