为什么AsyncPipe在{{}}和*ngIf中的计算结果不同
AsyncPipe在{{}}和*ngIf中的计算结果不同的原因是因为它们在Angular中的使用方式和计算时机不同。
首先，{{}}是Angular中的插值表达式，用于在模板中显示数据。当使用{{}}时，Angular会自动订阅Observable或Promise，并在数据到达时更新视图。因此，当使用AsyncPipe在{{}}中时，它会自动订阅Observable或Promise，并在数据到达时更新视图。
而ngIf是Angular中的结构指令，用于根据条件来添加或移除DOM元素。当使用ngIf时，Angular会在每次变更检测时计算条件表达式的值，并根据结果来添加或移除DOM元素。因此，当使用AsyncPipe在*ngIf中时，它会在每次变更检测时计算Observable或Promise的值，并根据结果来添加或移除DOM元素。
由于{{}}和ngIf的计算时机不同，导致AsyncPipe在它们中的行为也不同。在{{}}中，AsyncPipe会自动订阅Observable或Promise，并在数据到达时更新视图，因此可以直接在模板中使用AsyncPipe来显示异步数据。而在ngIf中，AsyncPipe会在每次变更检测时计算Observable或Promise的值，并根据结果来添加或移除DOM元素，因此不能直接在*ngIf中使用AsyncPipe来判断异步数据的真假。
总结起来，AsyncPipe在{{}}中用于显示异步数据，而在*ngIf中用于计算异步数据的真假，并根据结果来添加或移除DOM元素。在使用AsyncPipe时，需要根据具体的使用场景选择合适的方式来使用。
相关·内容
我很难弄清楚什么是Angular的最佳实践。 我有一个问题： <div>
<app-child [data]="data | async">
</app-child>
</div> 我应该执行以下操作： 答:使用后台属性更新相关的值 class ChildComponent{
@Input
set data(value){
this._data =value;
this.label = this.labelService.getLabelColor(value.
浏览 13提问于2020-02-01得票数 0
在服务中声明如下：
public currentDBUserBS$: any;
constructor(private afDb: AngularFireDatabase){}
fetchUser(uid){
this.afDb.object(`users/${uid}`).valueChanges().subscribe((dUser) => {
if (dUser) {
this.currentDBUserBS$ = dUser;
}
});
}
现在尝试在模板中使用
template: `<li *ngIf="(authServ
浏览 0提问于2017-11-28得票数 10
回答已采纳
我尝试在使用changeDetection: ChangeDetectionStrategy.OnPush,的组件中执行以下操作
@ViewChild('searchInput') input: ElementRef;
ngAfterViewInit() {
this.searchText$ = fromEvent<any>(this.input.nativeElement, 'keyup')
.pipe(
map(event => event.target.value),
startWit
浏览 0提问于2020-06-18得票数 5
回答已采纳
2回答
在Angular 2中，有没有我应该知道的关于内存管理的特定陷阱？
为了避免可能的泄漏，管理组件状态的最佳实践是什么？
具体地说，我见过一些人在ngOnDestroy方法中使用。我应该一直这样做吗？
在Angular 1.X中，我知道当一个$scope被销毁时，它上的所有监听器也会自动销毁。在Angular 2分量中的可观测性是什么？
@Component({
selector: 'library',
template: `
<tr *ngFor="#book of books | async">
<td>
浏览 25提问于2015-12-25得票数 21
回答已采纳
我基本上是从一个父组件(相册组件)路由到musicList组件。musicList组件获取存储在激活的路由器中的音乐数据，它只是从解析器服务中解析它(尽管我尝试过直接调用它，但仍然存在相同的动画问题)。 使用*ngIf的模板在每次调用路由器上的各种id时添加和删除每个音乐数据，但仅在加载页面或刷新页面时进行动画。为什么会这样呢？ <h2>My Album</h2>
<ul class="crisisAlbum">
<li *ngFor= "let crisisMusic of crisisAlbum" [cla
浏览 25提问于2020-04-07得票数 0
回答已采纳
我在角8中创建父/子关系。Parrent组件调用设置可观察roleList的服务调用，然后将此roleList传递给子组件。在子组件中，我尝试订阅子组件接收的输入变量，并使用新值实例化MatDataTableSource。
问题是：子组件接收值，但组件不会重新呈现。在调用应用程序中的更改(例如:将鼠标悬停到另一个更改状态的组件)之后，它确实显示了从服务接收到的数据。
这些是构成部分：
父组件.ts:
import { Component, OnInit, ChangeDetectionStrategy } from
'@angular/core';
import { Role
浏览 3提问于2019-09-30得票数 2
回答已采纳
2回答
下面是可以在上运行的Angular组件的代码
@Component({
selector: 'my-app',
template: `
<div *ngIf="currentNumber$ | async as currentNumber">
<b>{{currentNumber}}</b>
</div>
<form [formGroup]="simpleForm">
<input type="number" formContr
浏览 0提问于2018-02-06得票数 1
基本上，我仍然不太确定如何清除角组件中的反应性代码。以下规则是否正确和充分？
我对反应性组件的规则：
关于手动x.subscribe()：
如果使用x.takeUntil(.)或者类似的构造，那么就没有手动清理了。
如果在组件作用域中调用了x.complete()，那么就没有手动清理
其他手动.unsubscribe()按需或在ngOnDestroy()
关于模板的可观测的x-异步：
不需要手动清理，加上onPush兼容
手动直接创建可观察的新主题()：
手动.complete()在ngOnDestroy()中从未关闭
浏览 0提问于2018-05-03得票数 2
回答已采纳
3回答
我理解异步管道在可观察的基础上工作，并帮助我们为稍后将要出现的数据加载事务异步。
但是，我也可以不用异步来工作。以下是代码
组件
export class XComponent{
someProp: string;
someList: string[];
someFn(){
this.someService.subscribe(
data=>{
this.someProp = data.prop;
this.someList =
浏览 4提问于2017-03-23得票数 3
下面是by组件，它的ViewChild引用了html中的#h1：
import { Component, ElementRef, ViewChild } from '@angular/core';
@Component({
selector: 'app-root',
template: `
<h1 #h1 *ngIf="showh1">
Welcome to {{title}}!
</h1>
`,
styleUrls: ['./app.component.css']
})
e
浏览 2提问于2017-12-17得票数 3
对于如何以及何时在angular2模板中解析嵌套异步管道，我有点困惑，而且文档现在还不是很好，所以我希望有人能帮上忙。
我有一个非常简单的Rxjs，可以观察到它是通过Observable.of(myArray).delay(2000)从服务中返回的--延迟是为了帮助显示时间上发生了什么。
在我的模板中，我只是在上面返回的可观察到的<p>标记上使用一个异步管道来控制显示它的时间，然后尝试在该<p>标记中显示返回的数组长度：
<p *ngIf="!(lists | async)">Waiting for lists...</p>
&l
浏览 1提问于2016-03-03得票数 14
回答已采纳
1回答
当我的服务调用返回HTML页面的数据时，使用异步绑定与只映射到具体对象有什么好处或好处？
下面是这两个选项的一个例子。
映射到组件属性
// component
event: any;
// ngOnInit()
this.eventService.getEvent(this.id).pipe(take(1)).subscribe(response => {
this.event = response;
}, error => {
console.log(error);
});
// service
getEvent(id: number): Observable&
浏览 1提问于2021-12-03得票数 1
2回答
我正在尝试做一个自定义的异步验证器，它检查所提供的电子邮件是否已经存在于DB上。当出现错误时，它可以正常工作，但当错误得到解决(输入有效数据)时，它将显示Cannot read property 'emailIsTaken' of null
我用的是模板驱动的方法。我就是这样用的。
<input type="email" name="email" [(ngModel)]='email' #mail='ngModel' required [pattern]='emailPattern' vali
浏览 0提问于2018-03-23得票数 0
回答已采纳
我目前正在尝试将我的FrontEnd与我们的后端API连接起来。我遇到了一个问题，我必须等待后端做出反应。
例如，当我删除我的一个层时，当我调用getTiers()-method时，它不会立即更新，所以我使用setTimeout(() => this.getTiers(), 500);来给API一个响应的机会，然后为我的前端获得更新的响应。
如果没有setTimeout，我必须重新加载页面，然后才能看到更改，例如，在删除其中一个层之后。
有没有更好的方式，异步工作？我尝试在ngFor循环(<div class="col-md-4" *ngFor="let t
浏览 4提问于2017-06-16得票数 0
1回答
目前，我正在编写Maximilianüller Angular 4教程的reactive-forms作业。在作业中，我必须创建一个反应式表单，我做到了。然后，我必须创建一个自定义的异步验证器，用于检查控件的值。它不应该等于'Test‘。这是我的打字代码：
import {Component, OnInit} from '@angular/core';
import {FormControl, FormGroup, Validators} from '@angular/forms';
import {Observable} from 'rxjs/
浏览 2提问于2017-08-01得票数 15
回答已采纳
我只需要获得一个项目，所以我在模板中使用了ngIf而不是ngFor。
模板：
<div *ngIf="item | async">
Id {{ item.id }}
Number {{ item.number }}
</div>
服务：
get(id: number): Observable<Response> {
return this.http
.get(`myApi/id`)
.map(response => response.json());
}
构成部分：
export class DetailItem
浏览 5提问于2017-07-10得票数 0
回答已采纳
3回答
我有一个快速搜索框，我想有一个加载动画。我使用ng-template和ngIf来显示/隐藏这个动画。我有一些li的嵌套在同一个div中，它订阅了一个可以使用异步管道来显示结果的搜索结果。当父div上没有*ngIf时，这个异步管道工作得很好，但是当我应用ngIf时，它似乎不再是订阅了。这是一种预期的行为吗？还是我做错什么了？
我的标记看起来是这样的。
<input #searchBox type="text" (keyup)="itemLoading=true;searchTerm$.next(searchBox.value)"/>
<div *
浏览 0提问于2018-08-22得票数 6
回答已采纳
1回答
我对棱角很陌生，也找不到任何东西来解释从ng generate @angular/material:material-nav生成的代码行的确切含义。
我特别不清楚以下几句话：
[attr.role]="isHandset ? 'dialog' : 'navigation'"
[mode]="(isHandset | async)!.matches ? 'over' : 'side'"
[opened]="!(isHandset | async)!.matches">
更确切地说
浏览 1提问于2018-05-13得票数 2
回答已采纳
1回答
给出一个看起来像这样的模板
<some-component
*ngIf="someColdObservable$ | async"
[result]="someColdObservable$ | async"
></some-component>
一个可以观察到的是这样的：
someColdObservable$: this.store.pipe(
select(isAllowedToDoThis),
filter(Boolean),
flatMap(() => apiRequest())
);
someCold
浏览 1提问于2019-11-29得票数 1
回答已采纳
我试图以角方式运行crud项目，但由于此错误，表中的数据没有显示：
InvalidPipeArgument:管道AsyncPipe的“对象对象，对象对象”
相应的行是名为Stud-list.Component.ts的文件中的第31行。我试图删除异步，但它没有修复任何问题。谢谢你们所有人。
student.service.ts
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable
浏览 4提问于2021-03-30得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储活动推荐
腾讯云开发者
