Angular2变量在更改后未更新
Angular2是一种流行的前端开发框架，用于构建单页应用程序。在Angular2中，变量在更改后未更新的问题通常是由于变量绑定不正确或变更检测机制不起作用引起的。
要解决这个问题，可以采取以下几个步骤：
- 检查变量绑定：确保在模板中正确绑定了变量。使用双向绑定语法（()）或单向绑定语法（[]）将变量绑定到模板中的元素或属性。
- 手动触发变更检测：在更改变量后，可以手动触发变更检测机制，以确保视图更新。可以使用
ChangeDetectorRef服务的detectChanges()方法来实现。在组件中注入ChangeDetectorRef服务，并在变量更改后调用detectChanges()方法。 - 使用
ngOnChanges生命周期钩子：如果变量是通过输入属性传递给组件的，可以使用ngOnChanges生命周期钩子来监听输入属性的变化，并在变化发生时更新组件的内部变量。在组件中实现ngOnChanges方法，并在方法中处理变量的更新逻辑。 - 使用
async管道：如果变量是通过异步操作获取的，可以使用async管道来确保在变量更新后更新视图。在模板中使用async管道来订阅异步操作，并自动处理变量的更新。
总结起来，解决Angular2变量在更改后未更新的问题需要正确绑定变量、手动触发变更检测、使用ngOnChanges生命周期钩子或async管道来更新视图。以下是一些相关的腾讯云产品和链接：
- 腾讯云产品：云服务器（https://cloud.tencent.com/product/cvm）、云数据库 MySQL版（https://cloud.tencent.com/product/cdb_mysql）、云原生容器服务（https://cloud.tencent.com/product/tke）。
请注意，以上答案仅供参考，具体解决方法可能因实际情况而异。
相关·内容
我是Angular2的新手(没有任何使用Angular1的经验)，目前我在一个小网站上工作。我需要做的是非常直接的。在AppComponent的模板中，有两个用于选择语言的按钮。我还有一个路由，假设是/products，其中显示从WS (通过服务的http get )检索到的产品列表。当我按下某个语言按钮时，我需要刷新产品列表。我在ProductsService类中发出http.get请求，并在ProductsComponent类中订阅observable。但是，如何在接收ProductsComponent中的订阅的同时，从AppComponent触发get请求呢？
如有任何帮助，将不胜感激
浏览 4提问于2016-09-08得票数 0
我在angular2这里有点困惑。许多示例如下所示
import { Component } from "@angular/core"
但实际上在node_module中存在angular2目录。所以从逻辑上讲它应该是
import { Component } from "angular2/core"
这两者之间的区别是什么？
浏览 0提问于2016-05-10得票数 11
我从RC1更新到RC2，得到了一条神秘的消息--“检查后表达式发生了变化”。代码非常简单。
父组件有两个孩子“姐妹”和“兄弟”。在init之后，姐妹发出一个分配给父变量的事件，而兄弟的Input()属性绑定到同一个变量。我认为这是使用父变量的兄弟级组件之间的“经典”通信。
它过去在RC1中工作，但不是RC2。我检查了CHANGELOG.md，但没有发现任何线索。我做错什么了？
import { Component, Input, Output, EventEmitter } from '@angular/core';
@Component({
selector:
浏览 3提问于2016-06-22得票数 3
回答已采纳
在检索邮递员集合时，我们经常需要设置/创建变量集合。
它们在postman中以红色突出显示：
我不能在环境变量中“简单地”设置这个变量的值。我很乐意在未解析的变量上单击鼠标右键并直接设置它，而不需要手动创建。
或者，系统收集所有集合变量并将它们设置为空值。
有没有什么可以加快速度的点击量？
非常感谢你的帮助
浏览 50提问于2021-02-18得票数 3
2回答
我使用angular2-chartjs来创建一个图表。下面是我的代码
模块
import { ChartModule } from 'angular2-chartjs';
视图
<div class="col-md-4">
Login Frequency Filter
<button (click)="handleClick($event)" type="button">Update Data</button>
</div>
<div class=&#
浏览 0提问于2018-08-04得票数 0
我知道如何使用compiler.clearCache()。然而，它似乎只适用于HTML模板。通常，在我更新了组件的TS之后，浏览器仍然在使用旧的javascript。目前，我必须显式地清除浏览器缓存，然后用户可能也必须这样做。
在Angular2/4中有没有更好的方法来确保使用更新的ts/js文件？
浏览 0提问于2017-04-20得票数 0
我正在尝试创建一个简单的安卓应用程序，在其中我从JSON获取数据，并将其添加到ListView中。
我确实从JSON获得了数据，但没有显示任何行。我发现这是因为行是在JSON完成下载之前“创建”的。如何在下载ListView后进行JSON更新？
<code>A0</code>
浏览 42提问于2019-08-23得票数 0
回答已采纳
Q1.是否可能有一个控件：
ValidNumber = new Control('', CustomValidators.number({min:1, max:10}))
以验证模板中所有类似类型的input字段？
Q2.可以由ngFor生成这些字段吗？
FailedMethod 1:验证工作，但值是耦合的。
<input [ngFormControl]="ValidNumber" name="num1" type="number"/>
<input [ngFormControl]="ValidNumb
浏览 2提问于2016-02-26得票数 5
回答已采纳
所以我已经搜索并尝试了几个小时。我正在尝试将html转换为fadeIn，但当ngFor显示它时，它总是不透明的:1，并且从不褪色。FadingOut不是问题。
@Component({
selector:'c-translation-wizard',
templateUrl: 'scripts/translationWizard/TTranslationWizard.html',
animations: [
trigger('flyInOut', [
state('active', style({ opac
浏览 1提问于2016-09-24得票数 0
我正在尝试创建一个简单的网格组件，但在发出事件后更新视图时遇到了问题！请解释一下，谁知道，为什么更新了简单的组件后，视图没有重新渲染？这段代码有什么问题？
export class GridComponent implements OnInit {
@Input() resource: any [];
@Output() saveModel = new EventEmitter();
@Output() deleteModel = new EventEmitter();
attributes: any[];
isUpdating: boolean = false;
up
浏览 1提问于2016-09-26得票数 1
3回答
我正在调用我的后端服务器(Spring )，它返回对象Foo的列表。
但是，当我在*ngFor中列出我的对象时，它根本不会迭代。我知道我的服务器正在返回两个对象的列表，正如我已经调试过的那样，并且响应返回是一个由两个对象组成的数组。我想我错过了一个愚蠢的步骤，任何帮助都是非常感谢的。
foo.ts
name: string;
id: number;
description: string;
list-foo.service.ts
@Injectable
export class ListFooService
constructor(private _http: Http) {}
private
浏览 4提问于2016-04-12得票数 0
回答已采纳
1回答
我在我的c#项目中有一个剑道网格，我想检查网格中的项是否有任何更改。我使用下面的代码来检查它，但它总是返回false。
var data = $("#field-grid").data("kendoGrid");
var hasChanges = data.dataSource.hasChanges();
我的网格
var fieldGrid = $("#field-grid").kendoGrid({
height: 320,
浏览 2提问于2018-04-07得票数 0
我使用Angular 2。对于全局变量access，我创建了一个服务并将其注入到我的组件页面中。
我可以在任何页面中访问它，但当我更新该变量时，在另一个页面中访问它时所做的更改将不会产生影响。
这是GlobaldataService中的代码
import { Injectable } from '@angular/core';
@Injectable()
export class GlobaldataService {
public var1="haii";
}
这是我使用的服务：
constructor(public obj: GlobaldataS
浏览 1提问于2017-10-30得票数 2
我有一个类UserList，它有一个私有的内部变量，被设计成只能用于访问器函数。如何在ngFor绑定中以性能良好的方式访问该内部列表？
class UserList {
private users:user[] = []
public addUser():void{..}
public removeUser():void{..}
public listUsers():user[]{
return this.users; //this is the only way to access the private users list
}
}
然后在某个部件..。
@
浏览 4提问于2018-01-08得票数 1
回答已采纳
1回答
我们有一个Angular 2客户端，它运行在Azure的.NET核心上的一个应用程序服务下。我们最近在startup.cs中添加了以下内容：
app.UseStaticFiles(new StaticFileOptions
{
OnPrepareResponse = ctx =>
{
const int durationInSeconds = 86400;
ctx.Context.Response.Headers[HeaderNames.CacheControl
浏览 1提问于2017-07-21得票数 0
我正在跟踪这个库：
我的基础项目是从改编的。
目前，我能够将值保存在本地存储中，并使用webstorage检索它们。但是，刷新后，我的值将恢复为存储在内存中的-data.service.ts中的旧值。
bot.component.html：
<tr *ngFor="let bot of bots" routerLink="/botlevelup/{{bot.id}}">
<td>{{bot.id}}</td>
<td>{{bot.lastLevel}}</td>
<td&g
浏览 3提问于2017-12-18得票数 1
回答已采纳
但我每次都需要刷新它才能看到数据。
html组件：
<div>
<div *ngIf="reloadiv" class='tableauPlaceholder' style='width: 1353px; height: 595px;'>
<object class='tableauViz' width='1353' height='595' style='display:none;'>
<param name='host_url&#
浏览 0提问于2017-10-03得票数 2
1回答
我正在编写一个类似的任务管理应用程序，我在使用BLoC时遇到了一些问题：
首先创建一个页面，显示通过按下FloatingActionButton()添加的所有任务。
下一步，当用户通过点击右上角的FlatButton (即保存)完成表单时，它将被提交给JobForm类中的_submit()方法。。
注意:我还添加了一些验证器来验证和RatePerHourForm，这样当它们为null时，它将显示一个错误，并且它们工作得很好。
但是，当用户按下保存按钮时，名称字段和ratePerHour字段总是空的，即使我调用了onChanged：，在每个TextField()中都要更新它们
浏览 2提问于2021-06-11得票数 1
回答已采纳
我已经通读了Nativescript ListView文档，并在谷歌上搜索，但找不到任何方法来突出显示列表视图中当前选定的项……这有可能吗？如果是这样，我该怎么做呢？
我的代码：
<ListView [items]="activeStockTakes" class="list-group" (itemTap)="selectActiveStockTake($event)">
<template let-activeStockTake="item">
浏览 3提问于2017-03-07得票数 1
回答已采纳
2回答
我试图将一个值传递给子组件，但是当父组件值发生变化时，该值不会更新。这是我的工作
儿童部分：
class Test extends Component {
constructor(props) {
super(props)
this.state = {
data: this.props.data,
}
}
render() {
return(
<div>{this.state.data}</div>
)
}
}
export default Test;
父js文件
constructo
浏览 0提问于2019-03-04得票数 1
回答已采纳
1回答
从另一个对象ios设置文本字段
、、、、
我在尝试设置和检索titleViewController上的UITextField对象中的文本时遇到了困难。
我有一个引用titleViewController对象的Journal对象，但似乎无法设置UITextField的文本值。
我在titleViewController中有一个指向UITextField对象的出口，并且Journal可以看到它，但是当我编写代码来设置这个值时，它在运行时不会发生任何事情。
XCode或日志中没有弹出的错误。我知道它应该可以工作，因为设置可以访问由同一个viewControllers管理的其他此类日志中的自定义方法。
-编辑-
以下是应要求提供的代码示例：
浏览 0提问于2012-07-10得票数 0
回答已采纳
在phpstorm中，你是如何做git pull --rebase的？我似乎找不到一个办法来做这件事。我希望这是默认行为，因为我们都在同一个分支上工作。
我正在做Version Control > Git > Pull Changes...的拉动。
浏览 1提问于2011-06-24得票数 8
回答已采纳
1回答
在麻省理工学院6.00SC课程中，我似乎被困在了这个问题上。我对编程很陌生。
问题1:如果一个人每月只支付信用卡公司规定的最低月薪，那么写一个程序来计算一年后的信用卡余额。使用raw_input()查询以下三个浮点数：
信用卡上的未清余额
年利率
每月最低付款率
每个月，以下面测试用例中所示的格式打印最低月付款、剩余余额、支付原则。所有的数字都应该四舍五入到最近的一分钱。最后，打印结果，其中应包括当年支付的总额和剩余余额。
这是我的新代码：
outstand_balance = float(raw_input('Enter the outstanding balan
浏览 3提问于2014-09-11得票数 0
所以我运行的代码如下所示：
import java.awt.*;
import java.io.File;
import java.io.IOException;
public class Main
{
public static void main(String[] args)
{
new Thread(()->{
try
{
Desktop.getDesktop().open(new File(Main.class.getResource("/blank.jpg&
浏览 6提问于2021-11-23得票数 0
1回答
我不能让它保存价值。由于某些原因，我没有完全理解onbeforesave的文档。这是我写的，但是这个选项不起作用。
html
<div class='title' editable-text='task.title' onbeforesave="updateTitle(task)">
{{task.title}}
</div>
js
var app = angular.module('Todolist', ['ngResource', 'xeditable']
浏览 2提问于2015-08-27得票数 0
我在我的angular2应用程序中使用了primeng。我正在为我的表视图使用DataTable，当我尝试像中解释的那样执行checkbox with paging时，我得到了错误...
错误...
Unhandled Promise rejection: Template parse errors:
Can't bind to 'headerCheckboxToggleAllPages' since it isn't a known property of 'p-dataTable'.
1. If 'p-dataTable' i
浏览 52提问于2017-06-24得票数 1
回答已采纳
我在我的Angular2应用程序中使用Firebase来进行用户身份验证。只有一个例外，它运行得很好。在用户登录之后，我想运行几个方法来检查这是否是用户的第一个登录。我试图将登录变为承诺，但是console.log(this.af.auth)生成null，因为它似乎是在用户单击登录按钮之后，但在实际登录完成之前被调用的。
有什么想法吗?在用户登录后，我如何触发操作？在我的例子中，我想检查用户是否已经存在于我的数据库中，如果没有，创建一个新的用户。
public login() {
this.af.auth.login()
.then(() => {
浏览 1提问于2016-10-28得票数 0
回答已采纳
上下文：
我想知道如何消除这个错误：
警告:无法对未挂载的组件执行反应状态更新。
我想我很清楚为什么会出现这个错误：
我有个路标。我在useEffect中有一小部分代码可以这样做：
if (!auth.isEmpty && auth.isLoaded) { history.push("/"); }
因此，当有人进入mypage/signin并且已经登录时，他会被重定向到主页。这很好，但：
问题：
当他没有签名的时候，我有一个小小的登录功能：
const signin = async (e: React.MouseEvent) => {
浏览 4提问于2020-04-23得票数 0
回答已采纳
如果提交后再合并似乎会更好。让我有点惊讶的是，当你的工作副本发生变化时，甚至还允许更新。在这种情况下允许更新是为了避免有两个父级的提交，这是由合并引起的吗？
浏览 0提问于2010-04-16得票数 8
回答已采纳
我正在尝试将spotfire可视化集成到angular2中。我已经下载了spotfire api javascript ie。spotfireapi.js
我不知道如何在Angular2组件中使用它。我在实例化以下内容时遇到错误：
var customization = new spotfire.webPlayer.Customization();
谁能告诉我在angular2中使用这个第三方应用程序接口的正确方法？
谢谢
浏览 0提问于2017-08-24得票数 1
1回答
我遇到了一种奇怪的情况，使用用sailsJS制作的API。
因此，当我使用邮递员登录时，护照在DB中创建一个会话，一切都正常。
但是，当我使用用Angular2制作的应用程序并对API执行相同的请求时，护照会在我的DB…中生成许多会话。
这是我的代码：Login - SailsJS
login: (req, res) => {
passport.authenticate('local', (err, user, info) => {
if ((err) || (!user)) {
return res.send({
浏览 1提问于2016-10-07得票数 0
回答已采纳
假设我有一个Angular2组件，它具有一些输入属性，如
@Component(...)
class ChildComponent {
@Input() input1: string;
@Input() input2: number;
internalState: any;
}
它在另一个组件中使用，甚至可能在列表中使用，例如：
<li *ngFor="#item of items">
<child-component [input1]="item.a" [input2]="item.b">
&l
浏览 1提问于2015-12-12得票数 2
回答已采纳
我正在使用Drupal 7，规则，分类术语(以便用户可以表明他的兴趣)和有机组，我需要人们订阅和取消订阅通过选择和取消选择分类术语/兴趣在配置文件页面。
在各个分类法术语上都有一个OG参考字段，因此可以知道哪个组与哪个分类法术语有关，以及需要在哪里订阅用户。通过使用“Fetch实体按id”，在规则中选择一个分类法术语时，我也得到了正确的组。
在储蓄新帐户后：
当人们注册时，他们可以在注册页面上选择自己的兴趣(分类术语)，并自动订阅相应的组。这个很好用。
个人资料编辑页面：
但是，当有人想在编辑概要页面上取消订阅(并再次订阅)时，我无法让它工作。
您知道如何通过检查/取消检查“更新配置文件后”的
浏览 4提问于2014-07-15得票数 1
回答已采纳
假设我有以下场景：
@Component({
selector: 'my-app',
template: `
<my-component
[myAttr]="myAttr"
></my-component>
<button (click)="onClick()">Click</button>
`,
directives: [MyComponent]
})
class AppComponent {
myAttr:
浏览 0提问于2016-03-16得票数 2
回答已采纳
我希望能够在angular2之外的变量发生变化时监视和更新。因此，假设我在一个外部javascript文件中有这样的内容：
var test = 1;
如何将此变量绑定到组件中的属性？
@Component({
...
})
export class MyComponent {
watchy = window.test;
}
根据的说法，这显然是可行的。
但事实并非如此。如果我在控制台中更改了变量，则该变量不会在模板中显示。我是不是遗漏了什么？
浏览 2提问于2016-04-24得票数 7
回答已采纳
1回答
忽略子报表样式
、、
我有一个表中包含一些子报告R2实例的报告R1。R2通过更改某些行的字体样式来动态突出显示这些行：
=IIf(Fields!DA.Value="2","Bold","Normal")
如果我单独渲染R2，一切都像预期的那样工作，一些行是普通字体，另一些行是粗体。但是，当呈现R1时，子报表的行将以普通字体显示。我该如何解决这个问题？
浏览 2提问于2015-10-01得票数 0
2回答
我在试着了解角质2是如何工作的。我目前正在阅读管道文档：，下面的示例如下：
import {Component} from 'angular2/core'
@Component({
selector: 'hero-birthday',
template: `
<p>The hero's birthday is {{ birthday | date:format }}</p>
<button (click)="toggleFormat()">Toggle Format</b
浏览 3提问于2016-01-05得票数 1
回答已采纳
我的页面上有一个很大的ngx手风琴。当我打开一些较低的手风琴时，我希望它滚动页面，以便打开的重音从窗口的顶部开始。我用scrollIntoView实现了滚动部分，但现在的问题是如何在正确的时间执行它。我目前正在ngAfterViewChecked中执行此操作，但是viewChecked被多次触发(mousemove、mouseenter等)。是否有一种方法只在DOM完成与angular2+ changeDetection单独呈现后才触发一段代码？
解决方案
这就是开始起作用的解决方案。
constructor(elementRef: ElementRef) {
this.element
浏览 0提问于2018-11-26得票数 2
回答已采纳
Angular2使用区域的概念来消除手动进行视图更新的需要。这一切都很好，但是，Angular2什么时候决定进行视图更新？
在阅读了这个之后，我有了这样的想法: Angualar2对几乎每个事件都进行视图更新。，甚至在摩丝精灵事件上!！是真的吗?
因为如果是的话，它的计算成本就太高了。
浏览 3提问于2016-12-02得票数 1
我有一些标签的*ngFor的md选择列表，例如[sport,relax,..]。
标记存储在this.tags中，选定的标记存储在this.tab中。
我想阻止用户选择超过5个标签。因此，如果用户选择第5项，则应该有一些警告，并且用户只能在未选中某些选中项时键入不同的标记。
我从这段代码开始，但它不起作用。我试图禁用列表项上的“检查”图标，然后在用户存储<5标记之前不将该项添加到this.tab。问题是我不能禁用这个“检查”图标。
这是代码：
clickedOnRow(row){
if(this.tab.length > 5){
this.tags.forEach((ite
浏览 6提问于2017-10-16得票数 1
回答已采纳
我已经创建了一个C# Windows Forms应用程序，并试图使其尽可能简单，以演示我遇到的问题。我正在尝试使用DataGridView来允许用户在一列中输入，同时从后台线程获取另一列中的更新。
问题在于，输入列实际上是不可编辑的，因为--我认为--用于输出列的更新会导致输入列在用户试图更改它时被更新为它的当前值。
这是DataGridView中的错误吗？有没有更好的方法来做这类事情？有人能推荐一个好的变通方法吗？
下面的代码演示了这个问题。输出列将持续更新，而输入列实际上是不可编辑的。我已经将设计器代码(Form1.designer.cs)和Main (来自Program.cs)合并到表单
浏览 3提问于2009-12-22得票数 5
回答已采纳
1回答
角app结构：
<app><div content><a href="#" (click)="show()">click me</a></div></app>
内容组件模板：
<ng-content></ng-content>
component有公共方法show()，但是当我单击此链接时，会得到：
Error: EXCEPTION: Error during evaluation of "click"
ORIGINAL EXCEPTION: Type
浏览 1提问于2016-02-23得票数 7
回答已采纳
1回答
我一直在做一个next.js项目，我有一个角色充当购物车。单击项目时，它会将项图像添加到列表中，并呈现所有选定的项。要删除该项目，您可以单击小图标。当单击小图标时，我会拼接该列表并更新道具，但直到添加另一项时，它才会更新。我已经看到了这个，但是当我实现它时，它会出现一个错误。我也读过这个，但它也不喜欢。我还在代码沙箱上发布了我的项目。
var cartImages = [];
export default function Home({ data }) {
const removeitem = (index) => {
cartImages.splice(inde
浏览 2提问于2021-09-20得票数 0
回答已采纳
我一直在尝试使用mongoose更新mongo db。我没有收到任何错误，但更新没有发生。我已经尝试了所有可能的方法。
exports.update_a_keyValue = function(req, res) {
console.log("templatecontroller: update_a_template - templateID:",
req.params._id, req.body);
Template.findOneAndUpdate({_id: req.body._id}, req.body, {new: false},
浏览 0提问于2017-11-28得票数 0
1回答
我有一个基于C#的网站。(www.recognitiongame.com)
首先，我想使用Angular2材料菜单组件。我已经创建了这个角度的项目，并把我的网站与ng的建设。起作用了。(ng构建创建了一个dist文件夹，我将js文件放到我的站点并链接到它们)
问题是.js文件太大(~7-8MB)。
如何设置(编译)？只有angular 2/material中的菜单组件，而不是all @转角/材质。
谢谢你，伊姆雷
浏览 1提问于2017-09-18得票数 1
回答已采纳
我在每一页上都看到了奇怪的[paperclip] Saving attachments.日志。我不能在本地重现它。
然后，我在Heroku50%上得到了H12超时错误。我不确定，但我想是回形针引起的，
我有两个问题：
1-如何在运行的时间和位置调试[paperclip] Saving attachments.日志？
2-如何监控所有操作，以及在heroku上需要多长时间？
非常感谢?
浏览 3提问于2013-06-25得票数 1
我只希望单一的标签(不是整个手风琴面板)被启用或动态禁用。我尝试了以下方法，下面是我的代码：
index.xhtml
<p:accordionPanel id="accordionPanelId" widgetVar="accordionPanelWidget">
<p:tab id="tab1" title="First Tab">
<h:outputText value="Contents of Tab1"/>
<h:form>
浏览 2提问于2013-04-22得票数 1
1回答
我在Windows7上使用ruby 4.0.1时遇到了问题。每次我从RubyMine运行RubyMine脚本时，它只包含一行
require 'rmagick'
我收到
LoadError: 126: The specified module could not be found. - C:/Ruby193/lib/ruby/gems/1.9.1/gems/rmagick-2.13.1/lib/RMagick2.so
from C:/Ruby193/lib/ruby/1.9.1/rubygems/custom_require.rb:59:in `require
浏览 0提问于2012-03-23得票数 5
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
