Angular 2+ заполняет HTML-таблицу с помощью ngFor, когда данные получают из API - PullRequest
Новая
       5

Angular 2+ заполняет HTML-таблицу с помощью ngFor, когда данные получают из API

0 голосов
/ 06 июня 2018

Я довольно новичок в Angular, поэтому, хотя я пытаюсь что-то сделать, я думаю, это не сложно, я застрял и нуждаюсь в вашей помощи.

Что мне нужно сделать, это заполнить HTML-таблицус данными клиентов по нажатию кнопки и после получения данных от вызова API.

Я могу отображать «фиксированные» данные с помощью ngFor, если я определяю их как открытое свойство класса TypeScript, как видно изclientsData1 (я оставляю это в качестве примера), но не могу связать ngFor с переменной, содержащей изменения результата json (clientsData).

Короче говоря, я пытаюсь сделать следующее: когда я нажимаю кнопку, я запускаю метод getItems икак только у getItems будет результат, мне нужно обновить таблицу.

Это мой класс TypeScript: 

import {Component} from '@angular/core';
import { Injectable }     from '@angular/core';
import { Http, Response } from '@angular/http';
import { Observable }     from 'rxjs/Observable';

import 'rxjs/add/observable/throw';
import 'rxjs/add/operator/catch';
import 'rxjs/add/operator/debounceTime';
import 'rxjs/add/operator/distinctUntilChanged';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/switchMap';
import 'rxjs/add/operator/toPromise';

@Injectable()
@Component({
  selector: 'demo-app',
  templateUrl: 'app/views/app.component.html'
})
export class AppComponent {
  public clientsData : string;
  private clientsUrl : string = 'http://www.mocky.io/v2/5808862710000087232b75ac';
  public clientsData1 : any = [{'id': 1}, {'id': 3}, {'id': 5}];
  constructor (private http: Http) { }
  ngOnInit() {
    let btnGetClients = document.getElementById("btnGetClients");
    btnGetClients.addEventListener("click", (e:Event) => this.getItems()
        .subscribe(
          ipdata => this.clientsData = ipdata.clientsJson
        ));
  }  
  getItems(): Observable<IPData> {    
        return this.http.get(this.clientsUrl)
                        .map(this.extractData);
  }
  extractData(res: Response) {
    return res.json();
  }
}
class IPData {
  public clientsJson : string;
}

А это HTML-шаблон: 

<h1>Insurance App</h1>
<hr />
<button id="btnGetClients">Get Clients</button>
<br/><br/>
<table>
    <thead>
        <th>Id</th>
        <th>Name</th>
        <th>Email</th>
        <th>Role</th>
    </thead>
    <tbody *ngFor="let client of clientsData">
        <tr>
            <td>{{client.id}}</td>
        </tr>
    </tbody>
</table>

Любая помощь будет высоко ценится.

Спасибо.

1 Ответ

0 голосов
/ 06 июня 2018

Во-первых, это плохая практика - использовать любые манипуляции с DOM в файлах TS.Вы можете добавить обработчик события щелчка, например, 

<button (click)='getItemsSubscription()'>Get Clients</button>

, и для итерации массива желобов, которого нет с момента создания компонента, вам нужно использовать ngFor, например, 

 <tbody *ngFor="let client of clientsData">
        <tr>
            <td>{{client?.id}}</td>
        </tr>
 </tbody

скавычка на клиенте.Знак кавычки означает, что вы получите данные, которые будут отображаться, когда они будут в вашей лексической среде компонента, или не будут отображаться вообще.

И еще одна вещь, если вы хотите вызывать данные одним нажатием кнопки.,Когда вы вызываете функцию, вы не подписываетесь на нее, поэтому вам нужно обернуть ее и сделать что-то вроде этого 

  getItemsSubscription() {
       this.getItems().subscribe(
              ipdata => this.clientsData = ipdata.clientsJson
        }
  }
...