Angular RxJs-如何手动推送来自位于父对象中的可观察对象的数据

我有一个可观察到的，生活在父母是通过定时器轮询。可观察对象被传递给子对象，在子对象中显示大量信息，并具有一系列操作。操作成功后，我需要再次从父级调用API并继续轮询。我该怎么做？这就是我到目前为止所做的：

堆叠闪电战更容易演示：

app.component.html

Total Count: <span *ngIf="users$ | async as users">{{users.length}}</span>

<hello [users]="users$"></hello>

<h3 (click)="manualRetrieval()">Click to Force Reload</h3>

<div *ngIf="users | async as userList">
    <div *ngFor="let user of userList">
      {{ user.title }}
      </div>
</div>

你可以试试这个：

您好，component.ts

@Output（）retrieve=neweventemitter（）；
手动检索（）{
log（'这应该在成功调用不同的API后手动更新结果'）；
this.retrieve.emit（）；
}

app.component.html

app.component.ts

retrieveManually=新主题（）；
恩戈尼尼特（）{
this.users$=merge（计时器（11000），this.retrieveManually）。管道(
开关映射（（）=>
这是一个.getList（）管道(
轻触（x=>console.log（`${x.length}10秒后检索到的结果`）
)
),
共享重播（1）
);
}

.

您可以尝试以下方法：

您好，component.ts

@Output（）retrieve=neweventemitter（）；
手动检索（）{
log（'这应该在成功调用不同的API后手动更新结果'）；
this.retrieve.emit（）；
}

app.component.html

app.component.ts

retrieveManually=新主题（）；
恩戈尼尼特（）{
this.users$=merge（计时器（11000），this.retrieveManually）。管道(
开关映射（（）=>
这是一个.getList（）管道(
轻触（x=>console.log（`${x.length}10秒后检索到的结果`）
)
),
共享重播（1）
);
}

---

.

您的代码自相矛盾

@Input（）用户：用户[]

是正确的，因为您可以通过父组件中的

async

管道向其传递一个数组。这使得

*ngIf=“users | async as users”

在

hello.component.html

中无效，我已将其更新为

*ngIf=“users | async as userList

Yep-您可以在控制台中看到它每10秒调用一次，用于演示目的。我想要的是手动进行API调用。实际上，每120秒进行一次投票。子组件中的API调用成功后-我想手动更新

getList

，因为我不希望用户最多等待120秒来更新数据。抱歉，我误解了，因为

hello.component

中的

async

的奇怪用法分散了我的注意力，因为属性是数组。我明白你现在想做什么了。你的代码是自相矛盾的

@Input（）用户：用户[]

是正确的，因为您可以通过父组件中的

async

管道向其传递一个数组。这使得

*ngIf=“users | async as users”

在

hello.component.html

中无效，我已将其更新为

*ngIf=“users | async as userList

Yep-您可以在控制台中看到它每10秒调用一次，用于演示目的。我想要的是手动进行API调用。实际上，每120秒进行一次投票。子组件中的API调用成功后-我想手动更新

getList

，因为我不希望用户最多等待120秒来更新数据。抱歉，我误解了，因为

hello.component

中的

async

的奇怪用法分散了我的注意力，因为属性是数组。我明白你现在想做什么了。做得优雅：+1。另外，我讨厌

shareReplay

被命名为

shareReplay

。做得优雅：+1。另外，我讨厌

shareReplay

被命名为

shareReplay

。

<h3 (click)="manualRetrieval()">Click to Force Reload</h3>

<div *ngIf="users | async as userList">
    <div *ngFor="let user of userList">
      {{ user.title }}
      </div>
</div>

  @Input() users: User[];

  manualRetrieval() {
    console.log('this should manually update the results (getList call from parent) after a successful different API call in this component');
  }