Return Angular 中对象数组的值 7

Question

我对 Angular 比较陌生，但我有很多事情要做。让我解释。我有一个对象数组和一个成功的服务运行，如下所示。 array of Objects

我创建了一个输入作为使用 ngx-bootstrap TypeAheadModule 的搜索，因此我可以在搜索中显示预输入值。如果我使用硬编码字符串数组，这是成功的。

下面显示的组件的 html 标记基于该 ngx-bootstrap 文档。

<input [(ngModel)]="selected"
[typeahead]="points"
class="form-control">

这个 [typeahead] 属性看起来只接受一个字符串数组。

这是我的问题。我有一个来自我的服务的对象数组，但我只需要每个对象的名称值来填充将成为我搜索的字符串数组的内容。我一直在互联网上寻找从我的数组中检索值的最佳方法。我觉得我缺少一些非常简单的东西。

下面是我目前离开的地方。我有 api 要求将点加载到点数组中，直到我弄清楚如何访问数组中的值。

points: Point[] = [];  

 this.service.getPoints().subscribe(response=> {
  this.points = response as Point[]
});

我的 TypeAhead 中的当前 returns [Object Object]。如何将这些值访问到我的数组中并将它们 return 作为字符串数组？

谢谢大家！

Answer 1

试试这个..我想你错过了 div ngFor

  <div *ngFor="let point as points; let i of index">
    <input [(ngModel)]="point[i]"
    [typeahead]="point"
    class="form-control">
  </div>

您尝试直接打印 points 数组，希望这种方法能解决您的问题。

Answer 2

我错过了有关 ngx-bootstrap 文档的一小部分。有一个额外的属性 'typeaheadOptionField' 可以让您 select 从更复杂的对象数组中提取字段。

Return value from Object Array in Angular 7