Question

我对Angular很陌生，所以尽管我想要完成某些事情，但我觉得这并不困难，我很困难，需要你的帮助。

我需要做的是在点击按钮时以及从api调用收到数据后填写带有客户数据的html表。

我能够显示＆＃34;固定＆＃34;使用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>
<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>

非常感谢任何帮助。

感谢。

Answer 1

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

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

当数据来自api

1 个答案: