Angular 订阅推送多个对象到数组

Question

我正在制作一个 angular 应用程序，我有一个空数组


addresses : any [] = [];

然后在单击事件后我启动一个 http observable 以从服务器收取数据

然后我制作了一个管道图来获取我想要的东西，然后我进行了订阅

const URL ='some url';
onSearch() {
this.httpClient
  .get(`URL${{some data to generate the http observable}}`)
  .pipe(
    map(response => response.address),
    tap( => console.log("address array", address))    // address array [Object, Object, Object]
  )
  .subscribe(address => this.addresses = address);
}

在 html 模板中我有这个

<button (click)="onSearch()"> search address </button>

<ul *ngFor="let address of addresses">

<li>{{address.one}} - {{address.two}} - {{address.three}}</li>

</ul>

第一次点击按钮没问题我看到了结果，但是第二次点击按钮

第一个结果从第二个结果中删除。

我的问题是如何将多个结果存储在数组中以及如何在 html 模板中看到它们？

Answer 1

你可以试试这个。

.subscribe(address => this.addresses = [...address, ...this.addresses]);

Answer 2

利用 angular 的变更检测

你可以试试这个。

.subscribe(addressArray => 
  addressArray.foreach(
    address => this.addresses.push(address)
  )
);

或者这个：

.subscribe(addressArray => {
  for (const address of addressArray){
    address => this.addresses.push(address);
  }
});

这两种方法不适用于 angular 变化检测，因为它们改变现有数组而不是创建新数组。

这些方法都创建了新数组，angular 变化检测将很容易发现时间。

这个：

.subscribe(addressArray =>
  this.addresses = this.addresses.concat(addressArray)
);

或者这个：

.subscribe(addressArray =>
  this.addresses = [...this.addresses, ...addressArray]
);

它们都是实现同一目标的非常相似的方法。

利用Angular的异步管道

这是一种非常不同的方式：直接在流中输出结果数组！

而不是像这样的数组：

addresses: any[] = [];

你有一个 Observable 和一个 Subject 像这样：

newAddresses = new Subject<any[]>();
addresses = newAddresses.pipe(
    scan((acc, val) => ([...acc,...val]), [])
)

然后您的搜索会直接向您的主题发送结果。

const URL ='some url';
onSearch() {
  this.httpClient
    .get(`URL${{some data to generate the http observable}}`)
    .subscribe(response => this.newAddresses.next(response.address));
}

现在在您的 HTML 中，您可以使用 angular 的异步管道订阅此数组

<button (click)="onSearch()"> search address </button>
<ul *ngFor="let address of addresses | async">
  <li>{{address.one}} - {{address.two}} - {{address.three}}</li>
</ul>

这是合理的额外工作量。那么何必呢？

灵活性：现在任何数量的方法都可以更新您的地址，并且它们都将由 scan 以统一的方式管理。
可维护性：如果你想在未来更改或格式化地址，有一个简单而独特的地方可以做到。
可扩展性：您可以添加精美的 RxJS 运算符，如 debounce 来控制结果在屏幕上的显示方式。当事件排队时，这是停止 display-stuttering 的一种非常好的方法。
性能：如果您的应用程序依赖于推送数据而不是绑定数据，您可以完全关闭 angular 的更改检测并提高应用程序的性能:).

即使您不打算关闭变更检测，您也可以改变内存中的大量数组，而不必担心变更检测是否会拾取它或需要明确告诉变更检测来检查您的内容更改数组。

Angular 订阅推送多个对象到数组

Angular subscribe push multiple object to array

arrays

subscribe

rxjs

angular

利用 angular 的变更检测

利用Angular的异步管道