为什么角度指令 *ngIF 不适用于动态值？答案

【问题标题】：Why angular directive *ngIF doesn't work with dynamic value?为什么角度指令 *ngIF 不适用于动态值？
【发布时间】：2020-05-24 21:09:36
【问题描述】：

我有一个带有一些块的组件，我只想在某个页面上显示来执行此操作我正在使用角度指令 *ngIf，并订阅路由器更改我获取当前 url 的位置。我不明白为什么它不起作用。这是代码：

ts.文件

我使用的变量 showSignUpBlock

 public showSignUpBlock = false;

  constructor(
    private userService: UserService,
    private router: Router,
    private localeService: LocaleService,
    private soliticsService: SoliticsService,
    private pushWooshService: PushWooshService,
    private loaderService: LoaderService,
    private gtmService: GtmService,
    private routingService: RoutingService
  ) {
    this.subscribeToIsLoadingUpdates();
  }

  ngOnDestroy(): void {}


  setShowBasicLayout(url: string): void {
    const pagesWithSignUpBlock = ['education/academy/login'];
    this.showSignUpBlock = pagesWithSignUpBlock.includes(url);
  }

  ngOnInit(): void {
    this.routingService
      .subscribeToRouterEvents()
      .subscribe((event: RouterEvent) => {
        const currentPath = event.url.substring(1);
        this.setShowBasicLayout(currentPath);
        console.log(this.showSignUpBlock);
      });
  }

html.file

阻止我需要显示或隐藏的内容并且 ngIf whick 不起作用是这个 *ngIf="showSignUpBlock"


  <div class="login-form-signup" *ngIf="showSignUpBlock"> {{ 'login.sign-up' | translate:lang }}
    <span class="login-form-signup-link" (click)="navigateToRegistrationPage()">{{'login.click-here'| translate:lang}}!</span>
  </div>

如果有人能解释如何解决它，我将非常感激。

【问题讨论】：

你这里有多个 *NgIfs.. 哪一个？您能否提炼出问题以仅显示不起作用的部分。树上的木头 ;-)
@JGFMK 我在上面的问题描述中指定了 *ngIf ，并且还在代码中通过注释指定了它。变量是showSignUpBlock。块代码是倒数第三个。
您有多个跨度、div 等。HTML 中的哪一个专门给出了问题？一个或全部！如果你删掉所有有用的东西，你将摆脱一堵文字墙，并有一些更简洁的东西可以帮助其他人更快地解决你的问题。只是一个提示！
@VolodymyrHovorun 你试过调试它吗？
@alexander.sivak 是的，订阅后值会发生变化，但对区块没有任何影响。

标签： javascript html angular angular-ng-if dynamic-variables

【解决方案1】：

在设置 showSignUpBlock 变量后尝试使用ChangeDetectorRef#detectChanges。这会导致 Angular 更新视图。

【讨论】：