渲染在Angular模板中异步接收的文本
在Angular模板中，渲染异步接收的文本可以通过使用异步管道来实现。异步管道是Angular中的一个特殊管道，用于处理异步数据的渲染。
具体步骤如下：
- 创建一个异步管道：
- 创建一个异步管道：
- 在异步管道的transform方法中，使用async/await或者Observable来处理异步数据：
- 在异步管道的transform方法中，使用async/await或者Observable来处理异步数据：
- 在模板中使用异步管道来渲染异步接收的文本：
- 在模板中使用异步管道来渲染异步接收的文本：
在上述代码中，asyncData是一个异步数据，通过管道async的async修饰符来实现异步数据的渲染。当异步数据返回时，模板会自动更新并显示相应的文本。
异步渲染在Angular模板中的应用场景包括但不限于：
- 从后端API获取数据并渲染到模板中
- 处理用户输入的异步操作，如搜索建议、自动完成等
- 处理定时器、计时器等异步任务的结果渲染
腾讯云提供了一系列与Angular开发相关的产品和服务，包括但不限于：
- 云函数 SCF：无服务器云函数，用于处理后端逻辑，提供弹性、高可用的计算能力。
- 云数据库 CDB：可扩展的关系型数据库服务，用于存储和管理数据。
- 云存储 COS：对象存储服务，用于存储和管理大规模的非结构化数据。
- 云网络 VPC：虚拟私有云，用于构建安全、灵活的网络环境。
- 云安全中心 SSC：云安全中心，提供全面的云安全解决方案，保护云上资源的安全。
以上是腾讯云相关产品的简要介绍，更多详细信息请访问腾讯云官方网站。
相关·内容
有人让Mathjax和Angular2一起工作吗？
创建的Plunkr示例:-
从一些Angular1示例中，我看到调用MathJax.Hub.Queue似乎需要一个指令，但我怀疑需要很长一段时间才能使角2语法正确，所以我想知道是否已经有人这样做了？
下面是一个角度为1的例子。
而mathjax语法如下:-
尝试在Angular2中做类似的事情。
更新-以下工作，感谢蒂埃里。
构成部分：
import {Component, OnInit} from 'angular2/core';
import {MathJaxDirective} from './mathjax
浏览 4提问于2016-04-02得票数 9
回答已采纳
我需要你的想法/建议来减少我的应用程序在Angular 2中的页面加载。
页面渲染在Angular2中的初始加载中花费了时间。页面加载时间在每次页面加载时渲染UI元素需要4到6秒。
我们的要求是在2秒内加载页面
我正在尝试打开来自父页面的另一个页面。但是UI渲染在初始加载时需要时间。每次刷新渲染UI元素需要4到6秒的时间。用于创建UI元素的脚本执行在构建副本中花费时间，我们使用angular 2.0.1，而对于构建，我们使用gulp和systemjs构建文件
Angular版本: 2.0.X我们正在使用最新的版本( Angular，Node，Npm，Typescripts)请分享你在Angul
浏览 0提问于2016-10-22得票数 2
我在使用从我的firebase数据库中获得的对象时遇到问题。我可以收到json文件，没有任何问题，正如你在下面的图片中看到的那样。
<h1>{{ item | async | json}}</h1>
上面的代码在/src/app/app.component.html中。
这将从/src/app/app.component.ts接收item对象
import { Component } from '@angular/core';
import { AngularFire, FirebaseObjectObservable } from 'angul
浏览 22提问于2016-08-04得票数 3
在angular2中单击某个按钮时，如何更改该按钮的文本？
例如，将按钮文本从"Save“更改为"Saving...”然后还将其设置为禁用。
我知道如何在AngularJS、jQuery和普通JS中做到这一点，我对如何在Angular2中做到这一点也有一些想法，但我想确保在涉及到Angular2时，我没有以某种过时或令人费解的方式做到这一点。
浏览 1提问于2017-01-05得票数 6
回答已采纳
3回答
在我的应用程序中，我让一个组件将用户对象发送给另一个组件，它正确地接收了它，正如预期的那样成功地返回了console.log(user.vendorname)，但是它不会在html上显示出来。html文件
<div class="col-centered">
<h1 *ngIf="user | async">Welcome {{user.vendorname}}</h1>
</div>
组件文件
import { User } from '../User';
import { AccountInfo
浏览 17提问于2017-08-04得票数 1
我正在尝试将带有独立根html文件的服务器端渲染添加到我的angular-meteor项目中。但是，由于服务器端渲染在angular和iron router/flow路由器中是不可能的，支持服务器端渲染的不是angular而是blaze。请帮助我如何实现服务器端路由和angular ui-routing？
浏览 2提问于2016-03-08得票数 0
4回答
我使用@input从父组件接收属性，以便在子组件的元素中激活CSS类。
我能够从父级接收属性，并激活类。但这只管用一次。我从父组件接收到的属性是一个布尔数据类型，当我将它的状态设置为子组件的false时，它在父组件中不会改变。
Plunkr：
app.ts
import {Component, NgModule} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'
import { HeaderComponent } from './header'
浏览 9提问于2017-01-04得票数 95
回答已采纳
3回答
我想得到一个电子邮件的渲染在发送之前。
我用htmlTemplate和context创建了一个context，它可以很好地发送，但是如何获得具有上下文的生成模板以将其保存在数据库中呢？(客户需求)
我尝试了getBody()，但当我得到A message must have a text or an HTML part or attachments.时，似乎只使用文本模板。
$email = new TemplatedEmail();
$email->htmlTemplate($htmlTemplate);
$email->from($from)->to(...$to)-&g
浏览 2提问于2021-04-29得票数 3
回答已采纳
1回答
我有一个名为“Customer.Component.ts”的组件。在这个组件的视图中，有一个名为'Search‘的按钮。我正在做的是在这个“搜索”按钮上调用一个web方法，它从sql中获取数据。
为此，我有一个customer.service.ts文件，其中我编写了以下代码-
import { Injectable } from '@angular/core';
import { Http, Response, Headers, RequestOptions } from '@angular/http';
import { Observable } fr
浏览 2提问于2018-01-11得票数 0
回答已采纳
1回答
在angularjs指令中，“模板”和“templateUrl”有什么不同？
index.html：
<!DOCTYPE html>
<html lang="en" ng-app="app">
<head>
<meta charset="utf-8">
<title>Index</title>
</head>
<body>
<child-a-drtv></child-a-drtv>
&
浏览 0提问于2015-11-26得票数 2
回答已采纳
1回答
当我用角1.5.3编码的时候。这是代码：
app.js
var testApp = angular.module('test-app', ['plugin.template']);
testApp.run(function ($rootScope) {
});
createDirective('directiveOne');
createDirective('directiveTwo');
createDirective('directiveThree');
function createDirective
浏览 2提问于2017-08-17得票数 0
回答已采纳
我是刚开始观察和实验克利斯朵夫·伯格多夫的的一个基本的自动完全变体。运行此代码将生成：
例外: TypeError:无法读取未定义的属性“符号(Symbol.iterator)”
在发出其余的get呼叫后，请进入ingredientservice...rawsearch。该警报还会弹出一条对象对象消息。我已经证实端点运行良好。
任何关于如何调试这方面的建议都将不胜感激。
ingredientservice.ts等待对文本字符串的更改，删除它并执行REST调用，以便从端点获得自动完成的匹配。
import {Injectable} from 'angular2/core';
im
浏览 1提问于2016-03-29得票数 9
回答已采纳
1回答
我有一个输入字段，我想验证它。 我正在使用一个自定义验证器来检查该输入字段值的有效性。 在自定义验证器中，我使用输入字段值对端点进行rest调用，以检查输入的值是否有效。 问题是，当验证结果从rest API返回时，httpClient get调用以异步方式工作。输入字段验证器出来了，并且验证不能按照预期工作。 有没有同步进行http调用的方法？ 我的httpClient调用自定义验证器中的代码： labelNameValidators.ts： import {FormControl } from '@angular/forms';
export function labe
浏览 33提问于2019-09-24得票数 0
在Angular中，是否可以从AJAX调用中获取数据，并将其转换为HTML，然后放入Directive模板中？
下面是一个伪示例：
App.directive('aDirective', function (){
var getTemplate = function() {
var template = '';
//Make Ajax call here
...
angular.forEach(content_from_ajax, function (data) {
浏览 2提问于2015-07-21得票数 0
1回答
现在，我正在为我的应用程序编写前端代码。现在我有一个名为socketio的服务，它接收我的应用程序需要显示的数据。此外，该服务还使用主题将数据通过子项传递给组件。
最好只有一个主题/订阅，这说明了它在消息中的用途，还是有多个主题/订阅，每个任务一个？
我感兴趣的是关于内存使用和进程时间的最佳方法。
以下是我的服务：
import { Injectable} from '@angular/core';
import { Subject } from 'rxjs/Subject';
import * as io from 'socket.io-client&
浏览 2提问于2018-01-11得票数 3
回答已采纳
我使用了角7作为ssr，我们发现我们的应用程序在Google页面速度方面有严重的问题，所有的问题都在向zone.js发送。
页面速度抱怨脚本的估值过高，在中断应用程序后，我们发现问题与填充有关，然而，填充只包含
import 'zone.js/dist/zone.js'; // Included with Angular CLI.
import 'classlist.js/classList.min.js';
import 'web-animations-js/web-animations.min.js';
然后，我们所做的是完全删
浏览 1提问于2019-08-12得票数 4
我想使用自定义渲染在两行中显示选择器项目的长文本，我如何实现它？
浏览 18提问于2021-08-03得票数 0
2回答
我在试着。用于呈现按钮的HTML容器是通过AJAX请求接收到的，该paypal.Buttons.render()方法称为AJAX请求的onsuccess。现在一切都很好，除了按钮需要一些时间渲染在网站上，并变得活跃。我想提醒我的用户，该按钮正在呈现或加载，因此当AJAX请求返回时，他们不会停留在黑暗中，也不会显示按钮。是否有一种方法可以知道按钮何时完全呈现？
$.ajax({
url: example/foler,
data: data,
success: success(data)
});
function success(data) {
// data = <div
浏览 0提问于2019-12-11得票数 4
回答已采纳
我正在尝试使用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
2回答
有没有办法在级联中获得给定文本和固定宽度的字体大小？
我正在尝试：
TextField{
autoFit: TextAutoFit.FitToBounds
}
但文本始终左对齐。该要求是居中对齐文本与可变字体大小标签渲染在固定矩形。
浏览 0提问于2013-07-15得票数 2
我有一个创建倒计时的Observable.timer函数，当计时器在我的@组件中结束而不使用setTimeout()时，我想调用一个名为endTimer()的特定函数。我可以在视图中检查计数器== 0的值，但是如何签入@组件
import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams, ModalController } from 'ionic-angular';
import { Storage } from '@ionic/storag
浏览 1提问于2018-03-26得票数 0
我有两条指令，其中一条指令广播一条消息来获取另一条消息，如下所示：()
angular.module('app', []);
angular.module('app').directive('foo',
function($rootScope) {
return {
restrict: 'EAC',
link: function($scope, element, attrs, controller) {
$rootScope.$on("onStar
浏览 0提问于2017-02-23得票数 2
我在i18n (针对Angular2)中找不到除了在HTML语言中显示翻译后的文本之外的任何文档。我需要做的是直接在我的代码中获得翻译后的文本。在使用ng-translate特性的Angular 1中，使用$translate服务很容易获得它。我在Angular 2的新i18n中找不到对应的东西。我是不是遗漏了什么？
浏览 2提问于2016-12-14得票数 10
我有一个组件，它将用户输入(文本)发送到服务，并接收该文本的丰富版本。丰富的意思是某些单词被丰富了信息。服务器为我提供了原始文本和一个丰富的子字符串列表，每个子字符串都带有原始文本的开始和结束索引，因此我可以在原始文本中找到它们。
现在，我想要将带有突出显示的短语的原始文本显示为带有弹出按钮的按钮，其中显示了附加信息。
在Angular 1中，我有一个指令，在这个指令中，我动态地创建了模板，对找到的短语进行迭代，并在未丰富的短语之间为每个短语创建一个新按钮。使用$compile()，它们可以正确显示。按钮本身就是一个指令，所以代码看起来像这样：
var newButton = angular.
浏览 0提问于2016-10-21得票数 0
试着把Wordpress数据放到我的6角组件中。
当我通过Wordpress REST返回一个帖子时，它会生成正确的数据()，但是这些数据并没有传递到我的模板中。
服务：
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
@Injectable({
providedIn: 'root'
})
export class
浏览 0提问于2018-06-16得票数 1
回答已采纳
我已经进入了我的第六个小时，与希望有一个简单的解决方案的斗争，所以我想我应该在这里张贴。
我有一个功能，它的唯一目的是激活已部署的列表定义功能，然后创建一个新列表定义的实例。
列表定义功能称为“自定义访问列表”，其作用域为web。
因此，我的功能接收器激活这个列表定义功能，具有GUID "1E503BDA-803B-4a1a-A042-019FA1A70C4C"：
...
string featureGuid = "1E503BDA-803B-4a1a-A042-019FA1A70C4C"; // my 'Custom try
{
浏览 8提问于2010-01-21得票数 1
回答已采纳
<html ng-app>
<body>
<form ng-controller="StartUpController">
Starting:
<input ng-change="computeNeeded()"
ng-model="funding.startingEstimate">
Recommendation: {{funding.needed}}
</form>
<script
浏览 1提问于2013-07-19得票数 0
回答已采纳
伙计们，
我正在尝试为生产环境构建angular2，并且已经使用gulp和这个生成了app.min.js。在那之后，我已经在我的组件文件中提供了内联超文本标记语言，并试图运行它，它是有效的，但是，我如何在angular2中提供模板缓存，以便@component装饰器中的templateUrl可以从缩小的超文本标记语言模板缓存中读取和获取模板。在这件事上请帮帮我。
谢谢
浏览 6提问于2016-08-18得票数 0
我在Angular 8上工作，我想在Angular模板中使用带参数调用的函数，所以我使用了PipeTransform，问题是当我使用服务时，订阅之外的变量是未定义的
这是CqpPipe.pipe.ts
projectCqp :string[];
transform(value: number, args?: any) {
this.cqpservice.getNumberOfProjectPerCQP(value, "Ressource Allocation").subscribe(data => {
this.projectCqp = data;
浏览 2提问于2020-03-09得票数 1
我有angular 8应用程序。 我只想以对话模式显示来自api调用的文本。 这就是组件中的api调用: FirstViewModalComponent
浏览 21提问于2020-08-18得票数 0
回答已采纳
1回答
就上下文而言，这是我的表单：
this.commentForm = this.fb.group(
{
commentId: [''],
commentType: ['', ExistsWithinList(this.commentTypes)],
commodity: ['', ExistsWithinList(this.commodities)],
title: ['', Validators.required],
description
浏览 3提问于2020-01-23得票数 0
回答已采纳
我已经恢复了客户端的数据，现在我想恢复每个客户端的细节，但是它给了我这个错误。
我已经恢复了客户端的数据，现在我想恢复每个客户端的细节，但是它给了我这个错误。
ERROR TypeError："_co.client未定义“
client.service.ts
import { map } from 'rxjs/operators';
import { AngularFirestore,AngularFirestoreCollection,AngularFirestoreDocument } from 'angularfire2/
浏览 1提问于2019-11-21得票数 1
回答已采纳
3回答
我正在开发一个Angular应用程序。问题是我的模板在相应组件中的变量(annonces)请求返回其值之前显示。所以我必须使用async管道。我尝试使用它，但是模板中的变量没有刷新，并且我没有*ngFor指令的结果
这是组件
export class AppListProduitImmobilierComponent implements OnInit {
public annonces: Observable<ProduitImmobilierDTO[]>
.................
.................
ngOnInit() {
this
浏览 3提问于2019-11-17得票数 0
我刚刚开始设计新的web应用程序，在我的旧设计中，我使用会话，网页渲染在后端，现在我们考虑使用REST和oauth来设计，通常我发现oauth和REST并使用来与第三方服务/应用程序集成，所以我的问题是，我可以在我的主要web前端构建angular，在rest和oauth中使用api服务吗?它可靠吗？
浏览 12提问于2019-08-19得票数 0
我不太确定我是否清楚地理解了渲染在RESTful路由中意味着什么。
例如:在我的页面控制器中，
class PagesController < ApplicationController
def home
render "home.html.erb"
end
end
在我的routes.rb文件中，我有以下内容：
get "/" => "pages#home"
render home.html.erb是否意味着输出此页面上的信息？
谢谢!
浏览 10提问于2017-02-25得票数 0
我正在学习angular。在这里，我制作人口统计组件作为标记，它将在person组件中使用。它将错误显示为demographic.component.html:3错误TypeError: Cannot read property 'FirstName‘of undefined
如果有人想解决这个问题，我已经把它上传到stackblitz链接是
person.json
{
"Demographics" : {
"ProfileId":1,
"FirstName":"vinit
浏览 0提问于2018-06-06得票数 0
我是Angular2的新手，我正在努力将从http.get()返回的数据显示在我的html中。我已经将问题缩小到对我的api的一个api的get()调用，如果我使用另一个api端点，数据在html中显示没有问题。我知道我的应用程序接口正在检索数据，因为当我对数据执行console.log()操作时，预期的输出就在那里。
服务
//color.service.ts
import { Injectable } from '@angular/core'
import { Observable } from 'rxjs/RX'
import { Http, Respon
浏览 7提问于2017-08-13得票数 0
回答已采纳
2回答
在这里，我试图扩展标准文本过滤器，以执行get请求，并将值传递给extended用户已经输入
过滤器名为“search”：
myapp.filter('search', function($filter){
console.log('search param'+$scope.search)
$http.get('http-hello2.html').success(function (data) {
return $filter;
});
但接收错误：
Error: [$http:badreq] ht
浏览 2提问于2016-02-14得票数 3
回答已采纳
5回答
如何从mvc3模型设置文本框宽度，假设我的模型如下，
public class MVCMODEL
{
[Required]
public int Name{ get; set; }
}
我希望当这个文本框渲染在视图中时，它的宽度将是800px如何在模型中添加自定义样式？
谢谢，
浏览 1提问于2012-12-04得票数 0
回答已采纳
1回答
当使用Jasmine测试我的Angular应用程序时，我必须创建目标测试组件中使用的所有组件的模拟副本。我这样做是为了避免对所有包含的组件进行深度渲染，因为我只需要渲染我的“父”组件。我想知道有没有像React/Jest中那样的浅层渲染？它允许离开我的组件的“真正的”子组件，但只是停止渲染在1级？
浏览 0提问于2018-10-14得票数 0
我使用以下函数从Angular 9服务返回数据： @Injectable({
providedIn: 'root'
})
export class SecurityService {
constructor(private http: HttpClient) { }
public getFunds(): Observable<any> {
// could do a loader here, or in an interceptor - same for the post, put and delete
let data = this.http.
浏览 37提问于2021-05-01得票数 0
1回答
我们的API上有一个端点，其中包含一组设置(如默认文本、其他端点等)。我们的前端是用AngularJS编写的，我们正在尝试找出最好的方法将它们返回给客户端，并使它们在应用程序中的所有指令中都可用。目前，我们最好的解决方案是将settings作为指令包含进来：
angular.module('ourapp')
.factory('settings', function ($http) {
var url = 'http://localhost:8080/settings';
return function (
浏览 1提问于2014-03-04得票数 1
2回答
角2异步可观测@输入
、、、
角2异步可观测@输入
在我的组件中，我有一个属性输入，当可观察到的返回值时，我想要感觉它。
getAppointments(askForAnswerId: number): Observable<Appointment[]> {
return this.appointmentService.GetByAskForAnswerId(askForAnswerId);
}
<app-appointment [appointments]="
(getAppointments(askForAnswer.askForAnswerId) | async)"><
浏览 2提问于2017-04-10得票数 0
回答已采纳
在tsconfig.json中使用"strictNullChecks": true时，当我使用异步管道测试订阅初始化的可观察对象的同步值时，我得到一个TS2531错误(Object可能为'null')： import {Component} from '@angular/core';
import {Observable, of} from 'rxjs';
@Component({
selector: 'app-root',
template: `
<div *ngIf=&
浏览 14提问于2020-04-25得票数 6
回答已采纳
恩:这个问题有两种语言。
Pt: Esta questão estáem dois idiomas.
用英语提问
我正在尝试使用HttpClient从我的API中获取响应。每当我试图在我的组件中设置this.items = data时，没有数据被传输到items变量，并且它在作用域中是未定义的。
这些是我的服务类：
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { PacoteAPI } from '
浏览 74提问于2018-06-02得票数 -1
我跟踪了app.component.html主模板中表达式的计算结果，并意识到每次刷新或单击任何页面时，跟踪都会出现5次。然后，我在ngOnInit of app.component.ts中放置了一个跟踪，它只按预期执行一次.只有html文件中的表达式被多次调用！
主要路线定义：
const routes: Routes = [
{ path: '', redirectTo: '/dashboard', pathMatch: 'full' },
//{ path: '', component: DashboardComp
浏览 3提问于2017-04-13得票数 1
回答已采纳
2回答
我正在尝试使用Angular (2+)渲染一些SVG文本。
在调试器中，我在svg树中看到了文本节点，但在屏幕上看不到文本。
我创建了一个柱塞来演示这个问题：
应用程序：
import {Component} from 'angular2/core';
import {SvgTextComponent} from 'src/svgtext.component.ts';
@Component({
selector: 'my-app',
providers: [],
template: `
<div>
&
浏览 0提问于2016-04-13得票数 5
回答已采纳
使用以下路由定义：
export const routes: Routes = [
{ path: '', redirectTo: '/home', pathMatch: 'full' },
{ path: 'home', component: GeneralComponent },
{ path: 'test', component: TestComponent }
];
export const routing: ModuleWithProviders = RouterModule.forRoot
浏览 0提问于2017-05-14得票数 1
回答已采纳
1回答
为了让我的角组件能够通过简单的查询( GraphQL )从阿波罗的GraphQL服务器检索数据，我已经挣扎了好几个小时。我使用阿波罗-角4.1.0和@阿波罗/客户3.0.0，甚至尝试了@graphql-编码/类型记录-阿波罗角
这是我的应用程序模块：
import { HttpClientModule } from '@angular/common/http';
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browse
浏览 8提问于2022-10-22得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
实时音视频活动推荐
腾讯云开发者
