使用ngfor将值加载到输入值

Question

我尝试的是将我从数据库中获取的多个值加载到输入值字段中，如下所示：

 <div *ngIf="items$ | async; let items; else loading">
  <input type="text" size="80" *ngFor="let item of items" value="{{ item.payload.val().Title }}">
  </div>

我想要完成的是将我传递的所有值存储到值字段中，但只有一个输入字段存储在其中。

Answer 1

如果你理解正确，你只需要将来自数组的所有相关值叠加到输入中。

这样的事情应该对你有用，

<div *ngIf="items$ | async; let items; else loading">
  <input type="text" size="80" [value]="computevalueFromItems(items)">
</div>

在组件中，

computevalueFromItems(items: any[]): string {
  return items.reduce((acc, curr, ind, arr) => {
     return (ind === arr.length - 1) ? acc + curr.payload.val().Title : acc + curr.payload.val().Title + ' ';
  }, '');
}