Question

我有一个网络API，可以获取帐号列表。

c＃

public async Task<IHttpActionResult> GetAccountNumber(string username)
    {
        var accountNumber = await (
            from ca
            select new { ca.account_number }).ToListAsync();


        // Return the records
        return Json(accountNumber);
    }

我正在使用角度6来显示数据。 html

打字稿组件

`accountnumbers:AccountNumbers = {
account_number:    null

}`

ngOnInit() {
var currentUser = JSON.parse(localStorage.getItem('currentUser'));
this.sub = this.aroute.params.subscribe(params => {
  if(currentUser.username != null) {
    let apiURL = this.systemSettings.getWebAPISettings('accountNumber');
    let token = this.userService.getToken();
    // Setup the header with the auth token
    let headers = new Headers({ 
      'Authorization': 'Bearer ' + token
    });
    let urlOptions = new RequestOptions({ headers: headers, params: {
      "username": currentUser.username
    }});

    this.http.get(apiURL, urlOptions).subscribe(res => {
      this.accountnumbers = res.json();
    });
  }
});

Chrome响应

[{“ account_number”：“ 90001931”}]

帐号未显示在屏幕上。我做错了什么？

Answer 1

这是一个竞争条件：首次加载模板时，this.accountnumbers仍未定义。然后，一旦API调用完成，Observable解析并分配了一个值，就会触发更改检测周期，然后您会看到这些值。

有两种典型的模式可以解决此问题：

使用elvis operator（这可能是您最好的选择，因为您只有一个访问者）：

<p [innerText]="accountnumbers[0]?.account_number"></p>

?.的意思是“如果定义了左侧的操作数，则访问此运算符右侧的属性”。

当api响应包含数据并且我已订阅时，数据未显示在屏幕上，Angular 6

1 个答案: