在Angular2 Typescript中显示具有插值的对象数组的内容

Question

应用

一个简单的搜索栏和一个用户输入关键字的按钮，返回的响应来自RESTful服务器（HTTP GET请求）

simplesearch.ts

export class SimpleSearch {
    kw: string; // keyword
    resp: string; // response from Server
}

simplesearch.service.ts

有一个名为searchData的简单方法，它使用用户的关键字作为查询搜索来执行HTTP GET请求。 （为简洁起见，不包括代码）

simplesearch.component.ts

/*All respective headers and @Component removed from brevity*/
const OUTPUT: SimpleSearch[] = []; // create an array for storing Objects

export class SimpleSearchComponent {
    Output = OUTPUT; // define variable for array
    constructor(private httpServ: SimpleSearchService, private temp: SimpleSearch) {}

/*Search button on HTML file does this*/
Search(inputVal: string) {
    this.temp.kw = inputVal; // store the value of user's input
    this.httpServ.searchData(inputVal)
          .then(res => this.temp.resp = res); // store the response in temp.resp

    // push the Object on the Output Array
    this.Output.push({kw: this.temp.kw, resp: this.temp.resp}); 
    }
}

插值变量

我使用Output作为HTML模板的插值变量。我在无序列表中显示数据

<ul>
     <li *ngFor="let keyword of Output">
         <span>{{keyword.kw}}</span>
     </li>
</ul>

 Response:
 <ul>
     <li *ngFor="let answer of Output">
        <span>{{answer.resp}}</span> <!-- WHAT TO DO HERE for Array Index-->
     </li>
 </ul>

结果

每次用户输入新关键字时，我都会在列表中看到关键字 以错误的方式回应

  

如何通过插值传递索引？或者我错了？

简单的方法是为关键字和响应创建两个单独的Array<String>，这很有效，因为我可以使用索引删除页面上的内容但是在数组中使用了一个对象我很困惑关键：值表示和数组（OUTPUT）本身的索引。

Answer 1

问题在于开发人员注意到的问题，this.temp.resp 在外面是异步功能。因此，当您在Output数组中推送项目时，它始终使用new关键字推送上一个搜索，因此您将获得resp始终“落后一步”的行为。您可以查看此内容以了解此异步行为：How do I return the response from an Observable/http/async call in angular2?

让我们看看代码并解释发生了什么。我假设你已初始化'temp'，因为它没有在第一次搜索时抛出错误，其中temp.resp将被定义，除非temp被初始化。

this.httpServ.searchData(inputVal)
  // this takes some time to execute, so the code below this is executed before 'this.temp.resp' has received a (new) value.
  .then(res => this.temp.resp = res);

// old value of 'temp.resp' will be pushed, or if it's a first search, empty value will be pushed
this.Output.push({kw: this.temp.kw, resp: this.temp.resp}); 

所以如何解决这个问题，就是将this.Output.push(...行移到回调（then）中，以便将正确的值推送到数组中。

另外，我将您的模型更改为Interface而不是Class。但至于如何更改函数并在回调中进行赋值，我还会稍微缩短代码并执行：

Search(inputVal: string) {
  this.httpServ.searchData(inputVal)
    .then(res => {
       // we are pushing values inside callback now, so we have correct values! 
       // and 'SimpleSearch' stands for the interface
       this.Output.push(<SimpleSearch>{kw: inputVal, resp: res}); 
    });
  }
}

这应该注意相应的关键字会有相应的响应！ ：）

PS。值得注意的是，您可能希望在我们等待该关键字的响应时显示该关键字，我在此忽略它并应用与您当前使用的相同。