*ngIf 不对布尔值变化做出反应

Posted 2023-02-22

【中文标题】*ngIf 不对布尔值变化做出反应

【英文标题】：*ngIf does not react to boolean change

【发布时间】：2018-03-05 10:57:26

【问题描述】：

这里有一些代码。同样的模式 (afaik) 适用于英雄教程。

login.component.html：

<div class="four wide column middle aligned" *ngIf="wrongCredentialsInserted">
     <div class="ui error message">Invalid credentials
     </div>
 </div>

login.component.ts：

wrongCredentialsInserted: boolean = false;

//...      

onSubmit(login: LoginDto): void 
        console.log(`User '$login.username' attempts to login...`);
        if (this.authService.login(login.username, login.password)) 
          this.location.back();
         else 
          this.wrongCredentialsInserted = true; //This line gets executed!
        
      

即使我将wrongCredentialsInserted 设置为true，也不会显示该消息。它设置为 true，我已经验证了这一点。我也尝试过*ngIf="wrongCredentialsInserted === true" 之类的东西，因为我在其他地方读到过，但没有用。 我读到这可能与“从 Angular 2 开始的单向数据流”有关，但我知道我们能够在我们公司的 A2+ 项目中做这些事情。 AFAIK 一种数据绑定方式仅指组件间通信。

非常感谢任何形式的帮助。

编辑：由于我所做的事情似乎有点混乱，我将整个文件发布在这里。

login.component.ts

import AbstractControl, FormBuilder, FormControl, FormGroup, Validators from '@angular/forms';
import routerTransition from '../../router.transition';
import Component from '@angular/core';
import AuthService from '../auth.service';
import LoginDto from './login-dto';
import Location from '@angular/common';

@Component(
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css'],
  animations: [routerTransition()]
)
export class LoginComponent 

  private readonly USERNAME: string = 'username';
  private readonly PASSWORD: string = 'password';

  myForm: FormGroup;
  username: AbstractControl;
  password: AbstractControl;

  message: string;
  wrongCredentialsInserted = false;

  constructor(public fb: FormBuilder,
              public authService: AuthService,
              public location: Location) 
    this.message = '';

    this.myForm = fb.group(
      username: ['', Validators.required],
      password: ['', Validators.required]
    );

    this.username = this.myForm.controls[this.USERNAME];
    this.password = this.myForm.controls[this.PASSWORD];
  

  onSubmit(login: LoginDto): void 
    console.log(`User '$login.username' attempts to login...`);
    if (this.authService.login(login.username, login.password)) 
      this.location.back();
     else 
      this.wrongCredentialsInserted = true;
    
  

  login(username: string, password: string): boolean 
    this.message = '';
    if (!this.authService.login(username, password)) 
      this.message = 'Incorrect credentials.';
      setTimeout(
        function () 
          this.message = '';
        .bind(this), 2500);
    
    return false;
  

  logout(): boolean 
    this.authService.logout();
    return false;
  

login.component.html

<div class="ui raised segment">
  <form [formGroup]="myForm"
        (ngSubmit)="onSubmit(myForm.value)"
        class="ui form"
        [class.error]="!myForm.valid">

    <div class="field"
         [class.error]="!username.valid && username.touched">
      <label for="username">Username:</label>
      <input type="text"
             id="username"
             placeholder="Username"
             [formControl]="username">
      <div *ngIf="username.hasError('required') && username.touched"
           class="ui error message">
        Username is required
      </div>
    </div>

    <div class="field"
         [class.error]="!password.valid && username.touched">
      <label for="password">Password:</label>
      <input type="text"
             id="password"
             placeholder="Password"
             [formControl]="password">
      <div *ngIf="password.hasError('required') && password.touched"
           class="ui error message">Password is required
      </div>
    </div>

    <div class="ui grid">

      <div class="two wide column middle aligned">
        <button type="submit"
        class="ui button"
        [class.disabled]="!myForm.valid">Submit
        </button>
      </div>

      <div class="fourteen wide column middle aligned" *ngIf="wrongCredentialsInserted">
        <div
          class="ui error message">Invalid credentials
          </div>
        </div>

      </div>

    </form>
  </div>

login.component.css：空

auth.service.ts：

@Injectable()
export class AuthService 

  constructor(private http: Http) 
  

  login(user: string, password: string): boolean 
    if (user === 'user' && password === 'password') 
      localStorage.setItem('username', user);
      return true;
    

    return false;
  

  logout(): any 
    localStorage.removeItem('username');
  

  getUser(): any 
    return localStorage.getItem('username');
  

  isLoggedIn(): boolean 
    console.log(`Is user logged in? ' + $this.getUser() !== null`);
    return this.getUser() !== null;
  

【问题讨论】：

它对我有用。你能提供更多的代码吗？

打开浏览器的调试控制台（在大多数浏览器中通常是 F12 键）。您可能在其他地方遇到了模板错误（与此无关），这可能导致模板代码停止工作。

检查 css 的不透明度：0；显示：无；可见性：隐藏...

试试 *ngIf="wrongCredentialsInserted == true"，它应该可以工作

@AlejandroCamba 为什么你认为*ngIf="wrongCredentialsInserted == true" 应该可以工作，而*ngIf="wrongCredentialsInserted" 和*ngIf="wrongCredentialsInserted === true" 不行？

【参考方案1】：

在我的情况下，发生此问题是因为更改发生在 Angular 区域之外。在变更检测周期内运行代码可以解决此问题。在这种情况下，您几乎没有选择

将第三方函数封装在 zone.run 中（将 NgZone 注入控制器）

myFunctionRunByAThirdPartyCode()
  this.ngZone.run(this.myFunction);

将函数包装在 setTimeout 中

myFunctionRunByAThirdPartyCode()
  setTimeout(this.myFunction,0);

手动调用detectChanges()（向控制器注入ChangeDetectorRef）

myFunctionRunByAThirdPartyCode()
 this.changeDetectorRef.detectChanges();

【参考方案2】：

我之前遇到过类似的问题，*ngIf 没有考虑改变值，但这是因为我的布尔值是作为字符串从后端发送的，例如："true" 或 "false" 和解决方案我认为值得的是

yourVariable = booleanValue === "true" ? true : false

希望对您有所帮助。

【讨论】：

可以简化为：yourVariable = booleanValue === "true"

【参考方案3】：

Somewhere Validations 将 bool 变量触发到该状态。 （就像角度反应形式的'get'函数）请使用console.log（）来评估变量状态

【参考方案4】：

我的问题是，*ngIf 出现在 <form></form> 标记中。如果我把它放在外面，一切正常。我知道 angular 使用表单标签来注入他们的表单模块，但我没想到会有这样的行为。因此，我的验证错误只会在表单本身有其他验证错误时弹出。

【讨论】：

ngIf 没有理由不在form 标签内工作。

【参考方案5】：

*ngIf 没有对模型中的更改做出反应有几个可能的原因。

更改检测未运行

您在组件上使用OnPush 策略并更改组件状态，而无需手动触发 CD 循环。通过注入ChangeDetectorRef 并使用适合您需要的方法重新打开自动 CD 或手动触发 CD。

风格会误导你

ngIf 绑定可能正常工作并且模板已正确创建和销毁，但有些样式在视觉上会掩盖这一点，例如 display: none、visibility: hidden 等。请务必检查页面打开浏览器的开发工具。

有一个未捕获的错误

如果您在开发时没有打开控制台，很容易错过。可能有一个错误破坏了你的代码，Angular 无法从中恢复；从而防止任何进一步的 CD 循环运行和更新 DOM。确保有一个打开的控制台来检查错误。

你甚至没有改变模型

Angular 是一个框架，您可以在其中声明性地指定您希望如何基于模型创建 DOM。您可以通过编写模板来做到这一点。如果你的模型没有改变，DOM 也不会改变。确保正确的代码段正在运行。一个快速的方法是在更改变量的代码附近放置一个console.log。您还可以在浏览器的开发工具中放置断点，或者使用 Chrome 的实用程序扩展（例如 Augury）来独立于基于模板呈现的方式检查模型。

【讨论】：

非常感谢，但在我的情况下，这些观点似乎都无效。我还使用断点检查了代码（我之前做过 console.log() 来检查变量是否真的改变了）。没有错误，我没有搞乱更改检测。我不确定我应该如何检查 CSS 是否有“隐藏”等，但我的 CSS 基本上不存在，并且同一组件上的所有其他 *ngIf 都可以工作（尽管它们是通过表单验证而不是单个属性进行检查的） .