首页 文章

当从api获取数据时，Angular 2使用ngFor填充html表

提问于
浏览 次
2

我对Angular很陌生，所以虽然我想要完成一些事情，但我想我并不困难，需要你的帮助 .

我需要做的是在按钮点击和从api调用收到数据后填写一个带有客户数据的html表 .

我可以用ngFor显示“固定”数据，如果我将它定义为TypeScript类的公共属性，如clientData1所示（我将其作为示例），但不能将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>



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

任何帮助都感激不尽 .

谢谢 .

angular typescript ngfor

1 回答

  • 4

    首先，在TS文件中使用任何DOM操作都是不好的做法 . 您可以像这样添加click事件处理程序

    <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
        }
  }
    回复于

相关问题