在angular模板中使用异步操作中的变量
在Angular模板中使用异步操作中的变量，可以通过使用异步管道来实现。异步管道是Angular中的一个内置管道，用于处理异步数据流。
首先，确保在组件中定义了一个异步操作，例如一个返回Promise的函数或一个Observable对象。然后，在模板中使用异步管道来订阅这个异步操作，并在数据可用时进行处理。
以下是使用异步管道的示例代码：
- 在组件中定义一个返回Promise的异步操作：
import { Component } from '@angular/core';
@Component({
selector: 'app-example',
template: `
<div>{{ asyncData | async }}</div>
`
})
export class ExampleComponent {
asyncData: Promise<string>;
constructor() {
this.asyncData = this.getAsyncData();
}
getAsyncData(): Promise<string> {
return new Promise((resolve) => {
setTimeout(() => {
resolve('异步数据');
}, 2000);
});
}
}- 在模板中使用异步管道来订阅异步操作的结果：
<div>{{ asyncData | async }}</div>在上面的示例中，asyncData是一个Promise对象，通过getAsyncData()方法返回。在模板中，使用async管道来订阅asyncData，并在数据可用时显示。
异步管道会自动订阅和取消订阅异步操作，确保在组件销毁时不会出现内存泄漏。
关于异步管道的更多信息，请参考腾讯云的官方文档：异步管道 - Angular
相关·内容
3回答
Angular 4:从服务返回承诺进入无限循环
angular、promise、karma-jasmine、es6-promise
我正在学习在Angular 4中使用Jasmine测试异步代码。
getResolvedData(): Promise<boolean> {
return Promise.resolve(!!localStorage.getItem('token'));
}
并在组件的方法内部订阅此promise
getAsyncData() {
this.title = 'app';
this.service.getResolvedData().then((data) => {
return !data;
});
}
在模板中使用此组
浏览 0提问于2018-07-21得票数 0
2回答
检测角度模板，如果/或改变
angular、ng-template、angular-changedetection
我有一个模板，它使用Angulars条件模板逻辑来显示动态内容。条件的值根据来自异步函数的响应进行更改。在函数返回一个值之后，我想追加一个新元素。问题是，当我这样做时，新元素会在模板更改之前追加，从而有效地删除附加元素。
看看这个stackblitz活生生的例子：
app.component.ts
export class AppComponent implements AfterViewInit {
private hasAsyncResponded;
private p: HTMLParagraphElement;
async ngAfterViewInit() {
浏览 0提问于2019-09-11得票数 0
回答已采纳
4回答
接受参数的角5分量输入函数
angular、typescript、angular5
在角2+组件中，如何传递接受参数的回调函数？我最初的假设是
<app-example [onComplete]="doThing('someParam')"></app-example>
有时候我不需要任何参数，像这样：
<app-example [onComplete]="doSomeThingElse()"></app-example>
然后在我拥有的组件中
import { Component, OnInit } from '@angular/core';
@Componen
浏览 7提问于2017-12-28得票数 19
回答已采纳
2回答
对象创建期间使用异步操作时丢失的Vue3反应性
javascript、vue.js、vuejs3、reactive
我正在使用TS代码库中的一些对象(类)，这些对象(类)在创建后立即执行异步操作。虽然在Vue 2.x ()中一切都很好，但反应性与Vue3 ()发生了中断，没有任何错误。为了简单起见，这些示例是用JS编写的，但在TS中的行为与我的实际项目相同。
import { reactive } from "vue";
class AsyncData {
static Create(promise) {
const instance = new AsyncData(promise, false);
instance.awaitPromise();
ret
浏览 3提问于2021-05-07得票数 4
回答已采纳
1回答
角自定义管道:解析承诺不起作用，但是调用AsyncPipe会
angular、promise、angular-pipe
我想要达到的目标是有一个管道来处理以下签名：
any | (() => any | Promise<any>)
所以我写了下面的管道。
public transform(varOrFunc: any | (() => any | Promise<any>)): any {
if (typeof varOrFunc === 'function') {
const result = varOrFunc();
if (result.then) {
return this.asyncPi
浏览 5提问于2021-03-15得票数 1
回答已采纳
1回答
角ChangeDetectionStrategy.OnPush &在ngAfterViewInit钩子内不工作的观测值
angular、rxjs、angular2-changedetection
虽然在子组件上使用在ChangeDetectionStrategy.OnPush中更新的observables$，但是组件的值在各自的html模板中没有正确的反映。
@Component({
selector: 'app-example',
template: `exampleOne$ that does update - {{exampleOne$ | async}}
exampleTwo$ that doesn't update - {{exampleTwo$ | async}}
<button (c
浏览 6提问于2021-11-29得票数 2
1回答
使用promises在angularJS中建模异步数据
javascript、angularjs、promise、deferred
我正在开发一个与angularJS的单页应用程序，并与存储异步数据的问题。
为了简单起见，我基本上有一个服务来保存我的一些数据模型，这些模型作为promises返回(因为它们可以在任何给定的时间异步更新)。
我有一个角度手表，当某个条件发生变化时，它会更新这些模型。我还有一个角度表，当某些条件发生变化时，它会使用这些数据。
我的问题是:使用数据的手表在更新此数据的手表之前触发，导致它立即触发“陈旧的”数据而不是新的承诺。
代码示例：
angular.module('myApp', [])
.controller('myController', function(
浏览 1提问于2014-04-16得票数 0
1回答
获取http调用promise中返回的数据的Rxjs可观察性
angular、promise、rxjs、angular-promise、angular2-observables
我正在尝试使用ngx分页，但遇到了一些问题。我是angular 2的新手，对可观察对象和订阅者了解不多。
我有一个进行http调用并返回数据的服务：
getData(path: string, page: number=1) : Promise<IData[]> {
return this.http.get(path+'&pageNumber='+page)
.toPromise()
.then(response => {
浏览 5提问于2017-08-25得票数 0
回答已采纳
1回答
角4-在执行组件之前从服务中获取数据
angular、service
我是一个新手，不知道我的方法有什么问题，请建议如何解决以下问题。
下面是我要做的事情，当我访问主应用程序页面时，它从config.service.ts调用getConfigs()，并从后端update this.configStringSource.next(config)获取数据。在它重定向到this.router.navigate(‘/克隆/状态’)之后，我就没有从config.service.ts获得数据
如果我使用ngAfterContentChecked，config-server.service.ts在执行status.component.ts之前执行，并按预期的方式获取正确的数据
浏览 1提问于2017-09-05得票数 1
3回答
Angular2为什么是异步管道
angular、asynchronous、angular2-pipe
我理解异步管道在可观察的基础上工作，并帮助我们为稍后将要出现的数据加载事务异步。
但是，我也可以不用异步来工作。以下是代码
组件
export class XComponent{
someProp: string;
someList: string[];
someFn(){
this.someService.subscribe(
data=>{
this.someProp = data.prop;
this.someList =
浏览 4提问于2017-03-23得票数 3
我正在尝试使用angular中的HTTP库，我想从包含JSON文件的链接中获取一些信息，但这对我不起作用 api.server.ts： import { Injectable } from '@angular/core';
import {HttpClient} from '@angular/common/http'
@Injectable({
providedIn: 'root'
})
export class ApiService {
constructor(private http: HttpClient) {
}
浏览 39提问于2021-08-09得票数 0
1回答
使用可观测值自动更新视图
javascript、angular、observable、angular-observable
我使用可观察和HTTP请求在服务器上添加数据，然后更新其他路由。
我希望这些数据能立刻更新。实际上，我应该刷新页面以获得新的数据。
在我的服务中，我使用AddProj()和getAllProj()函数来获取和发送数据
service.ts
import { Injectable } from "@angular/core";
import { NouveauProjet } from "./models/nouveau-projet";
import { HttpClient, HttpResponse } from "@angular/common/h
浏览 3提问于2017-12-22得票数 0
2回答
如果可观察到的用户使用异步管道，是否需要取消订阅？
angular、rxjs、angular-pipe
我需要确定两种处理可观测值的不同方法是否同样有效，或者其中一种方法是否会导致内存问题。
在下面的示例中，foo$和bar是从服务接收其值的模板变量。每个人都有自己的可观察性。在组件中，从订阅中显式地给出了bar的值，然后在OnDestroy()中结束该订阅。然而，foo$没有显式地订阅服务，而是在模板中使用async管道。
foo$和bar都是显示服务数据的有效方式，还是foo$有问题，因为没有取消对内存清理的订阅？
ExampleService:
Injectable()
export class ExampleService {
get foo$(): Observable<
浏览 2提问于2019-05-08得票数 3
回答已采纳
1回答
AsyncPipe和要使用的示例是什么？
angular、pipe
我需要你的帮助。我正试图更详细地研究角度，然后开始学习asyncPipe。我有这个例子，但我不知道它是如何工作的。你能详细解释一下这段代码的工作原理吗？非常感谢
import {Component, OnInit} from '@angular/core';
@Component({
selector: 'app-root',
template: `
<p *ngIf="($observable | async) as time">
Current Timer Value {{time}}
</p>`
浏览 4提问于2022-03-22得票数 0
1回答
对SAP的后端调用不是从我的新Spartacus设置触发的
spartacus-storefront
我是斯巴达克斯的新手，我试图通过在myAccount导航中创建一个特性来实现端到端的集成。我能够渲染页面，并将CMS组件映射到角组件，并正确显示。
现在，我想从这个组件调用一个新的occ到Commerce。我编写了一个服务，它在其中调用API。但是我没有看到请求在Web浏览器控制台中被触发。是否需要为此做任何额外的设置？
我正在使用斯巴达克斯4.3和海布里2011
以下是构成部分
import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs';
impo
浏览 3提问于2022-02-04得票数 0
回答已采纳
2回答
Angular - reusing a component？
javascript、angular、rxjs、observable
所以，这就是我的用例:我从rest API获取一个observable，然后通过在模板中使用async来获取数据。单击时，我将获得特定用户的ID，然后使用该用户的数据填写表单。为了实现后者，我重用现有的观察值并过滤数据，然后订阅它。我想知道我的方法是否正确，因为我认为当我点击“编辑”来填写表单时，应用程序太慢了，所以我猜我在这里创建了太多的订阅或诸如此类的东西？
另外，为了便于讨论，我创建了两个可观察对象(user和users)，其中一个(user)获得了对另一个(users)的“引用”，然后它用async显示在模板中，同时我还订阅了它并将其设置为“常规”变量。这是一个问题吗？使用async显
浏览 0提问于2017-11-05得票数 0
2回答
避免后台异步请求返回null
javascript、angular、typescript、promise
我有一个非常大的请求，需要15秒才能返回数据。我想在用户登录时调用该请求，以减少他们进入加载数据的路由所需的时间(他们可以在完成后到达那里，这将立即向他们显示数据，或者它可能还没有完成，但只让他们在那一刻等待几秒钟)。
因此，当用户登录并获得成功时，我会请求大型数据集：
this.getDataService.getAsyncData(data.LinkToken); // This loads request from data service
然后，当数据返回时，我将其保存到本地存储中，当用户到达从ngOnOnit()发出该请求的路由时，可以使用本地存储进行检索。
getAsyncData
浏览 1提问于2017-06-14得票数 0
2回答
如何在Angular2点击函数中使用带有异步管道的Observable
angular、ionic2、observable、angularfire2
情景:我正在使用FirebaseObjectObservable填充我的离子2 (rc0)模板。模板代码：
<p>{{(course | async)?.description}}</p>
<button ion-button dark full large (click)="openDeckOnBrowser(course.deckUrl)">
<ion-icon name='cloud-download'></ion-icon>
<div>View Deck</div&
浏览 0提问于2016-10-05得票数 8
1回答
异步绑定与组件属性在角上映射的优势？
javascript、angular、asynchronous、rxjs、observable
当我的服务调用返回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
1回答
如何在Observable<any>中绑定单个类对象
angular、timer、binding、observable
我正在使用Angular4。我的打字记录文件中有一个可观察到的Windows计时器。
this.dynamicTime = new Observable<string>((observer: Subscriber<string>) => {
setInterval(() => observer.next(this.computeTime()), 1000);
});
在我的HTML方面，我是这样使用它的。
<h1>
<div>{{ dynamicTime | async }}</div>
浏览 2提问于2017-06-10得票数 1
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频活动推荐
腾讯云开发者
