首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

当我以编程方式将新值推送到数组时,数组的Angular5输入字段不显示ngModel的任何旧值

当以编程方式将新值推送到数组时,数组的Angular5输入字段不会显示ngModel的任何旧值。这是因为Angular的变更检测机制是基于对象引用的,而不是基于对象内容的。当你将新值推送到数组时,数组的引用没有改变,因此Angular不会检测到变化并更新视图。

解决这个问题的一种方法是使用不可变对象。你可以使用Angular提供的不可变操作符(如map()filter()concat()等)来创建一个新的数组,而不是直接修改原始数组。这样做会创建一个新的数组引用,Angular会检测到变化并更新视图。

另一种解决方法是手动调用ChangeDetectorRefmarkForCheck()方法来告诉Angular检测变化。在将新值推送到数组后,你可以调用markForCheck()方法来通知Angular重新检查组件及其子组件的变化。

以下是一个示例代码:

代码语言:txt
复制
import { Component, ChangeDetectorRef } from '@angular/core';

@Component({
  selector: 'app-example',
  template: `
    <input [(ngModel)]="arrayValue" />
    <button (click)="pushValue()">Push Value</button>
  `
})
export class ExampleComponent {
  arrayValue: any[] = [];

  constructor(private cdr: ChangeDetectorRef) {}

  pushValue() {
    this.arrayValue.push('New Value');
    this.cdr.markForCheck();
  }
}

在上面的示例中,当点击"Push Value"按钮时,会将新值推送到arrayValue数组,并调用markForCheck()方法告诉Angular检测变化。

对于推荐的腾讯云相关产品和产品介绍链接地址,由于不能提及具体品牌商,建议您参考腾讯云的官方文档和产品页面,以了解他们在云计算领域的相关产品和解决方案。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

angularjs 表单验证

$error 如果验证失败,这个属性的值为true;如果值为false,说明输入字段的值通过了验证。 字段中的输入非法时,.ng-invlid类会被添加到这个字段上。 你可以编辑自己喜欢的CSS . 你可以私有定制化这些类来实现特定的场景应用....value(字符串):value参数是我们想要赋值给ngModel实例的实际值。 这个方法会更新控制器上本地的$viewValue,然后将值传递给每一个$parser函数(包括验证器)。...$formatters $formatters的值是一个由函数组成的数组,其中的函数会以流水线的形式在数据模型的值发生变化时被逐一调用。...$viewChangeListeners $viewChangeListeners的值是一个由函数组成的数组,其中的函数会以流水线的形式在视图中的值发生变化时被逐一调用。

6.7K70

使用Ionic2开发Todo应用0 开始之前1 创建新的Ionic 2工程2. 设置主页(Home page)3 持久化数据保存4 总结

不同属性的行为可能会有所不同,取决于在什么平台上运行,以iOS为例,将end会将按钮放到导航栏的右边。...现在我们有一些输入框了,它们又有[(ngModel)]属性,这个就是双向绑定。...任何作用到title字段的改变都将立即影响到add-tiem-page.ts(我们马上要讲到)里面的this.title成员变量。反之亦然,任何this.title上的改变都将立即影响到模版。...注意我们这里建立了一个onDidDismiss监听器,这样就可以获取模态关闭时回传的数据,并通过saveItem方法保存。现在,我们仅通过将数据push到items数组,最终,我们将保存到数据库。...现在该函数将马上更新我们的新数据条目数组,但items也将被复制保存到数据服务,以便下次我们回到应用程序是可用。

6.1K50
  • AngularDart4.0 指南- 表单 顶

    一路上你将学习如何: 用组件和模板构建一个Angular表单。 使用ngModel创建读取和写入输入控制值的双向数据绑定。 跟踪状态变化和表单控件的有效性。...创建一个基本的表单 一个Angular表单有两个部分:一个基于HTML的模板和一个组件类,以编程方式处理数据和用户交互。 从课程开始,因为它简要地说明了英雄编辑可以做什么。...p模板输入变量在每次迭代中是不同的power; 您使用插值语法显示其名称。 与ngModel的双向数据绑定 现在运行应用程序有点令人失望。 ? 你没有看到英雄数据,因为你还没有绑定到英雄。...如果您忽略原始状态,则只有在该值有效时才会隐藏该消息。 如果您使用新(空白)英雄或无效英雄到达此组件,则在您执行任何操作之前,您将立即看到错误消息。...显示Model(可选) 提交表单目前没有视觉效果。 如预期的演示。 增加代码过后的demo不会教你任何关于表单的新东西。 但是这是一个锻炼一些新获得的绑定技巧的机会。

    17.5K30

    Angular 从入坑到挖坑 - 表单控件概览

    响应式表单 建立表单 由组件隐式的创建表单控件实例 在组件类中进行显示的创建控件实例 表单验证 指令 函数 在表单数据发生变更时,模板驱动表单通过修改 ngModel 绑定的数据模型来完成数据更新,...而响应式表单在表单数据发生变更时,FormControl 实例会返回一个新的数据模型,而不是直接修改原来的数据模型 4.2、模板驱动表单 通过使用表单的专属指令(例如 ngModel 进行双向数据绑定)...将数据值和一些对于用户的行为约束(某个字段必须填啊、某个字段长度超过了长度限制啊)绑定到组件的模板中,从而完成与用户的交互 4.2.1、模板驱动表单的双向数据绑定 在根模块中引入 FormsModule...使用 FormBuilder 构建的控件,每个控件名对应的值都是一个数组,第一个值为控件的默认值,第二项和第三项则是针对这个值设定的同步、异步验证方法 import { Component, OnInit...因此这里的验证方法需要在定义控件组时作为 FormGroup 的参数传入 与单个字段的验证方式相似,通过实现 ValidatorFn 接口,当表单数据有效时,它返回一个 null,否则返回 ValidationErrors

    18.9K20

    并发编程-04线程安全性之原子性Atomic包的4种类型详解

    ---- 概述 在实际应用中,当我们更新一个变量时,在并发环境下,如果多个线程同时去更新这个变量,更新后的值可能不是我们期望的值。...列举几个常用的方法: int addAndGet(int delta):以原子方式将输入的数值与实例中的值(AtomicInteger里的 value)相加,并返回结果 boolean compareAndSet...(int expect,int update):如果输入的数值等于预期值,则以原子方式将该值设置为输入的值 int getAndIncrement():以原子方式将当前值加1,注意,这里返回的是自增前的值...static AtomicInteger value = new AtomicInteger(5); public static void main(String[] args) { // 以原子方式将输入的数值与...常用方法 int addAndGet(int i,int delta):以原子方式将输入值与数组中索引i的元素相加 boolean compareAndSet(int i,int expect,int

    32510

    JSON神器之jq使用指南指北

    --stream: 以流方式解析输入,输出路径和叶值数组(标量和空数组或空对象)。...对于编程语言理论家来说,更准确的说法是 jq 变量是词法范围的绑定。特别是没有办法改变绑定的值;只能设置一个具有相同名称的新绑定,但在旧绑定的位置不可见。 解构替代运算符:?...任务 jq 中的赋值工作与大多数编程语言中的工作方式略有不同。jq 不区分对某事物的引用和副本——两个对象或数组相等或不相等,没有任何进一步的“相同对象”或“不同对象”的概念。...它在右侧采用一个过滤器,并.通过该表达式运行旧值来计算分配给的属性的新值。...这个应该显示 '=' 和 '|=' 之间的区别: 向程序提供输入 '{"a": {"b": 10}, "b": 20}': .a = .b .a |= .b 前者将输入的“a”字段设置为输入的“b”字段

    28.7K30

    AngularJs指令解密

    属性是用来声明指令最常用的方式,因为它能在包括老版本的IE浏览器在内的所有浏览器中正常工作,并且不需要在文档头部注册新的标签。 包含某个组件的核心行为时使用元素型。...\$parsers:\$parsers的值是一个由函数组成的数组,其中的函数会以流水线的形式被逐一调用。ngModel从DOM中读取的值会被传入\$parsers中的函数,并依次被其中的解析器处理。...\$formatters:\$formatters的值是一个由函数组成的数组,其中的函数会以流水线的形式在数据模型的值 发生变化时被逐一调用。...它和\$parser流水线互不影响,用来对值进行格式化和转换,以便在绑定了这个值的控件中显示。...\$viewChangeListeners:\$viewChangeListeners的值是一个由函数组成的数组,其中的函数会以流水线的形式在视图中的值发生变化时被逐一调用。

    2.2K70

    Unity基础教程系列——对象管理(二)对象多样化(Fabricating Shapes)

    为了让数组在检查器中显示并被Unity保存,可以添加SerializeField属性给它。 ? 字段出现在检查器中之后,将所有三个形状预置拖放到它上面,这样对它们的引用就会被添加到数组中。...理想情况下,此字段是只读的,因为形状实例始终是一种类型,并且不会更改。但是必须以某种方式为它分配一个值。我们可以将私有字段标记为可序列化,并通过每个预制件的检查器为其分配一个值。...因此,这是每个实例而不是每个预制件要跟踪的东西。 默认情况下,私有字段不会序列化,因此预制与它无关。一个新实例将简单地获取该字段的默认值,大多数时候是0,因为我们没有给它另一个默认值。...值得注意的是,存储在旧保存文件中的对象计数可以是任何数,但它始终至少为零。我们可以使用它来区分保存版本和对象计数。这是通过不逐字写入保存版本来实现的。相反,书写时要翻转版本符号。...使用GetComponent;两次性能并不理想,特别是当我们决定在将来多次改变一个形状的颜色时。因此,让我们将引用存储在一个私有字段中,并在一个新的Awake方法中初始化它。 ?

    1.8K10

    Angular 6.x 基础教程

    ,若我们改变绑定的表达式为 (click)="onClick(myInput)" ,当我们点击按钮时,控制台输出的结果是: 通过该输出结果,我们可以知道 #variableName...,当我们按下键盘的 enter 键时,将会调用组件类中定义的 onEnter() 方法。...mailService, @Inject('apiUrl') private apiUrl ) {} } 第六节 - 使用 ngFor 指令 在 Angular 中我们可以使用 ngFor 指令来显示数组中每一项的信息...,我们使用 let item of items; 语法迭代数组中的每一项,另外我们使用 index as i 用来访问数组中每一项的索引值。...需要注意的是,当 SimpleFormComponent 组件类的属性名称不是 message 时,我们需要告诉 Angular 如何进行属性值绑定,具体如下: export class SimpleFormComponent

    15.6K20

    AngularDart4.0 指南-体系结构概述 顶

    以类似的方式应用其他元数据注解以指导Angular行为。 @Injectable,@Input和@Output是一些比较流行的注解。...建筑外包是你必须添加元数据到你的代码,以便Angular知道该怎么做。 数据绑定 如果没有框架,您将负责将数据值推送到HTML控件中,并将用户响应转化为操作和值更新。...当用户点击英雄的名字时,(click)事件绑定调用组件的selectHero方法。 双向数据绑定是一个重要的第四种形式,它使用ngModel指令将属性和事件绑定在一个符号中。..."> 在双向绑定中,与属性绑定一样,数据属性值将从组件输入到输入框中。...ngModel通过设置其显示值属性并响应更改事件来修改现有元素(通常是)的行为。

    7.9K30

    AJAX 前端开发利器:实现网页动态更新的核心技术

    以下示例演示了如何在用户在输入字段中输入字符时,网页可以与Web服务器通信: 示例说明 在上述示例中,当用户在输入字段中键入字符时,将执行名为 "showHint()" 的函数。...但是,如果输入字段不为空,则执行以下操作: 创建一个 XMLHttpRequest 对象 创建在服务器响应就绪时要执行的函数 将请求发送到服务器上的 PHP 文件(gethint.php) 注意,添加了...> 在上述示例中,当用户在输入字段中输入字符时,通过AJAX与服务器通信,并从PHP文件中获取相应的建议。建议将在 "txtHint" 元素中显示。...以下示例演示了如何在用户在输入字段中输入字符时,网页可以与Web服务器通信: 示例说明 在上述示例中,当用户在输入字段中键入字符时,将执行名为 "showHint()" 的函数。...但是,如果输入字段不为空,则执行以下操作: 创建一个 XMLHttpRequest 对象 创建在服务器响应就绪时要执行的函数 将请求发送到服务器上的 ASP 文件(gethint.asp) 注意,添加了

    13400

    Java性能调优之容器扩容问题

    作为性能调优的一部分,容器调优往往被我们忽略,本文将尝试探索阐述一些关于容器调优中的扩容问题。虽然以Java为例,但是也同样适用于其他编程语言。...,在这个过程中发生了以下几点 确定新的容量,并以新容量为大小创建新的数组 将旧数组的数据拷贝到新数组中 旧的数组将会后续被GC回收掉 除此之外,扩容还会增加CPU高速缓存的未命中率。...因为 在JVM中,一般来说,由于对象和其字段常常都需要同时引用,将对象和其字段尽可能放在内存中相邻位置能够减少CPU高速缓存的未命中率。...而ArrayList扩容后的新数组可能不在于该对象相邻,所以扩容理论上会增加CPU高速缓存的未命中率。 注意:上面提到的都是CPU高速缓存的未命中率,不是命中率。...具体可以参考深入剖析 Android中的 ArrayMap 关于扩容的问题就是以上内容,当我们无论是使用任何数据结构时都需要考虑到具体的环境和需要,确保能够做到最优。

    75910

    如何在TypeScript中使用基本类型

    ,就好像我们是这样输入的: const language: 'TypeScript' = 'TypeScript'; TypeScript 这样做是因为在使用 const 时,我们不会在声明后为变量分配新值...输入数组有两种方法: 将 [] 附加到数组元素的预期类型。...例如,这将确保数组具有数字元素: const myArray: number[] = []; 这样,如果我们尝试将无效值推送到数组,TypeScript 将产生错误。...在以小步骤将 JavaScript 代码库迁移到 TypeScript 时,这种情况尤其常见。在这些场景中,可以使用一种称为any的特殊类型,这意味着任何类型。...当我们想键入无法确定其值的内容时,可以使用 unknown,但仍希望确保使用该值的任何代码在使用之前正确检查类型。

    3.7K10

    hashmap扩容过程保证可用_HashMap扩容

    如果旧数组不为空,当我们在扩容时就需要将旧数组的数组迁移到新数组,数据迁移需要遍历旧数组,将旧数组每个下标位的数据移动到新数组中。...如果计算出来的值为0,表示该结点为低位结点,将旧数组所有低位结点组合成一个新的Node链表,并赋值到新数组相同位置,即newTab[j] = loHead。...如果计算出来的值不为0,表示该结点为高位结点,将旧数组所有高位结点组合成一个新的Node链表,赋值给新数组当前位置加上旧数组长度的位置,即newTab[j + oldCap] = hiHead。...思考两个问题,问题一:为什么当下标结点为链表结点时,不采用单结点数据迁移的方式,即直接赋值?问题二:当采用高低位算法迁移数据的时候,为什么需要将链表分为低位链表和高位两个链表。...当数组扩容时,链表所有的结点必须根据新数组的长度重新计算下标位,此时即使链表中每个结点的Hash值不尽相同,但是由于&运算和数组两倍扩容的特殊性,可以根据高低位算法将链表分为高位链表和低位链表,并将这两个链表迁移到新数组不同的下标位

    1.5K20

    AngularDart4.0 指南- 模板语法二 顶

    NgModel:双向数据绑定到HTML表单元素。 NgClass 您通常通过动态添加和删除CSS类来控制元素的显示方式。 你可以绑定到ngClass来同时添加或删除多个类。...NgModel - 与[(ngModel)]形成元素的双向绑定 在开发数据输入表单时,通常都会显示数据属性,并在用户进行更改时更新该属性。 使用NgModel指令进行双向数据绑定使得这一切变得简单。...您不需要为您编写的Angular组件添加值存取器,因为您可以将值和事件属性命名为适合Angular基本的双向绑定语法,并完全跳过NgModel。上面显示的sizer是这种技术的一个例子。...你知道这一点,因为每个英雄的ID没有改变。 但是Angular只能看到新的对象引用列表。 它别无选择,只能拆除旧的DOM元素并插入所有新的DOM元素。...例如,您可以将数字显示为货币,强制文本为大写,或筛选列表并对其进行排序。 对于这些小型转换来说,Angular 管道是一个很好的选择。 管道是简单的函数,它接受一个输入值并返回一个转换后的值。

    30K20

    一个Angular 5教程:一步一步指导实现你的第一个Angular 5应用程序

    但是我们也有(input)="expression"一种将表达式绑定到输入元素的输入事件的声明方式。...每次用户向我们的输入和浏览器输出中输入数据时input $event,我们都会将其分配newCard.text给输入值。 在我们实现它之前还有一件事:这个输入看起来有点多,不是吗?...使用本地事件 所以我们有我们的变量填充,但我们仍然需要将该值发送到AppComponent中的卡列表。为了将数据传递给Angular组件,我们必须有输入。...文本中有一个我们字段的名称,一个空字符串是初始值,Validators.compose显然允许我们将多个验证器合并到一个字段中。我们使用.value并.setValue('')获得我们领域的价值。...我们在这里也看到了新的语法loadChildren,当我们询问 路由时,路由器会告诉路由器CardsModule在./cards.module文件中的延迟加载cards。我们在新.

    42.7K10

    Go 基础面试题

    空接口关系:任何类型都实现了空接口(interface),因为空接口不包含任何方法。 8. Go 当中同步锁有什么特点?...在 Go 语言中,数组和切片的传递方式体现了它们结构上的差异: 数组传递: 当将数组作为参数传递给函数时,Go 默认会进行值传递,这意味着完整的数组数据会被复制一份作为参数参入函数。...,并且将旧数组中的元素复制到新数组中。...如果旧容量大于或等于 1024 个元素,通常会增加 25%。 创建一个新的底层数组,其容量至少等于计算得出的新容量大小。 将原有的元素从旧数组赋值到新数组。...每次向map中插入新元素时,会同时迁移一部分旧元素到新的哈希表中。这种方式可以避免因一次性而导致的长时间延迟。 完成:一旦所有元素都迁移到新的map,旧的map结构将被垃圾回收掉。

    26310

    Unity基础教程系列(新)(六)——Jobs(Animating a Fractal)

    对于其他部分,它是当前级别数组的元素,其索引等于分形部分的索引。当我们以5的步长增加该索引时,也需要向其中添加子索引。 ?...FractalPart是一个结构,它是一个值类型,因此更改其局部变量不会更改任何其他内容。我们需要将其复制回其数组元素(替换旧数据),以便记住其旋转方式已更改。 ?...为缓冲区数组添加一个字段,然后在Awake中创建它们。4×4矩阵具有16个浮点值,因此缓冲区的步幅是16个乘以4个字节。 ? 我们还必须使用新的OnDisable方法释放缓冲区。...我们是否应该避免将数据发送到GPU? 是的,最大限度的避免。但现在,我们别无选择,我们需要以某种方式将矩阵发送到GPU,这是最有效的方法。 3.4 着色器 现在,我们需要再次创建支持程序绘制的着色器。...如果一个进程获得与另一个进程相同的元素,则它将获得旧值或新值。最终结果取决于我们无法控制的确切时间,这可能导致行为不一致,很难检测和修复。这些现象称为竞态条件。

    3.6K31

    Ask Apple 2022 与 SwiftUI 有关的问答(下)

    快速检索数组元素Q:为什么没有简单的方法将 TABLE 选择的行映射到提供表内容的数组元素上?似乎唯一的方法是在数组中搜索匹配的 id 值,这对于大表来说似乎效率很低。...在 SwiftUI 4 中,可以使用 .scrollContentBackground(.hidden) 隐藏列表的默认背景searchableQ:是否有办法在.searchable() 修饰器中以编程方式设置搜索字段的焦点...A:你可以使用 dismissSearch 环境属性以编程方式取消搜索字段。目前还没有 API 可以程序化地将焦点转至搜索字段。...TextField 内容验证Q:如何实现一个只接受数字的 SwiftUI TextField,小数是允许的。A:向文本字段提供 FormatStyle 以实现自动将文本转换为各种数字。...但是,此转换仅在文本字段完成编辑时才会发生,并且不会阻止输入非数字字符。目前 SwiftUI 没有 API 可以限制用户在字段中输入的字符。

    14.8K30
    领券