Angular+TypeScript密码强度检查：push()无法显示消息求助

嘿，我碰到过一模一样的问题！这其实是Angular变更检测的小坑，我来给你拆解下原因和解决方案：

问题根源 #

Angular的默认变更检测机制是监听变量引用的变化，而push()方法只是修改了数组的内容，数组本身的引用并没有改变。所以Angular“没察觉到”数组已经更新，自然不会刷新视图。但直接给message赋值字符串时，是替换了整个变量的引用，所以能触发视图更新。

解决方案 #

这里有几种靠谱的解决办法，你可以根据自己的场景选：

1. 用不可变操作替换push（推荐）

通过重新赋值数组来改变引用，这样Angular会立刻检测到变化：

// 扩展运算符方式（最常用）
this.messages = [...this.messages, '你的新消息'];

// 或者用concat方法
this.messages = this.messages.concat('你的新消息');

2. 手动触发变更检测

如果你一定要用push()，可以手动告诉Angular要更新视图：
首先在组件里导入并注入ChangeDetectorRef：

import { Component, OnInit, ChangeDetectorRef } from '@angular/core';

export class PasswordComponent implements OnInit {
  password = '';
  message = 'Your message goes here';
  messages: string[] = ["Hello"];

  constructor(private cdr: ChangeDetectorRef) { }

  // 你的密码检查方法里
  checkPasswordStrength() {
    // 执行push操作
    this.messages.push('密码强度不符合要求');
    // 手动触发变更检测
    this.cdr.detectChanges();
  }
}

3. 检查模板绑定是否正确

最后别忘了确认你的模板是不是正确遍历了messages数组，比如：

<!-- 正确的写法 -->
<div *ngFor="let msg of messages">
  {{ msg }}
</div>

如果模板里不小心绑成了message（单数），那肯定看不到数组里的内容哦！

内容的提问来源于stack exchange，提问作者Sue-May Xu