Действие не влияет на html файл

Question

У меня проблема с ngIf. В моем методе я изменяю логическую переменную следующим образом:

  switchListGridView() {
    this.viewGrid = !this.viewGrid;
    console.log(this.viewGrid);
  }

В моем html это выглядит так:

<div
  class="container"
  fxFlex
  fxLayout="row"
  fxLayoutAlign="space-between stretch"
>
  <div class="content" fxFlex fxLayout="row">
    <mat-grid-list *ngIf='this.viewGrid' cols="8" rowHeight="100px" fxFlex>
      <mat-grid-tile
        *ngFor="let element of fileElements"
        class="file-or-folder"
      >
        <span
          [matMenuTriggerFor]="rootMenu"
          [matMenuTriggerData]="{element: element}"
          #menuTrigger="matMenuTrigger"
        >
        </span>
        <div
          fxLayout="column"
          fxLayoutAlign="space-between center"
          (click)="navigate(element)"
          (contextmenu)="openMenu($event, menuTrigger)"
        >
          <mat-icon
            color="primary"
            class="file-or-folder-icon pointer"
            *ngIf="element.isFolder"
          >
            folder
          </mat-icon>
          <mat-icon
            color="primary"
            class="file-or-folder-icon pointer"
            *ngIf="!element.isFolder"
          >
            insert_drive_file
          </mat-icon>

          <span>{{element.name}}</span>
        </div>
      </mat-grid-tile>
    </mat-grid-list>
  </div>
</div>

На мой взгляд, это должно работать, но после нажатия кнопки Кнопка с действием ничего не происходит. В журнале консоли это работает нормально - показывает true false, но ngIf не работает. Он должен работать, как показывать или исчезать весь список мат-сетки.

Обновление 1

Место, где появляется кнопка:

<mat-toolbar class="toolbar top-menu-position">
  <div class="top-menu-divider"></div>
  <div *ngFor='let item of topMenu'>
    <button *ngIf='!item.seperator' mat-button [disabled]="item.disabled" class="button" [ngClass]="{'pointer': !item.disabled}" [title]="item.tooltip" (click)="item.action()">
      <mat-icon>
        {{item.icon}}
      </mat-icon>
    </button>
    <div *ngIf='item.seperator' class="top-menu-divider"></div>
  </div>
</mat-toolbar>

Конструкция кнопки в конструкторе:

{
        tooltip: 'List view',
        icon: 'apps',
        action: this.switchListGridView,
        disabled: false
      }

Редактировать 2

Stackblitz: https://stackblitz.com/edit/angular-dyfsm3?file=src%2Fapp%2Fapp.component.html

Answer 1

Вам не нужно использовать такие переменные в вашем HTML. Вам не нужен this

<mat-grid-list *ngIf="viewGrid" cols="8" rowHeight="100px" fxFlex>

Один способ сделать это

Машинопись

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  constructor(){
    this.tapList = [
      {
        action: 'tapped'
      }
    ]
  }
  tap = false;
  tapList: TapList[];

  tapped(): void {
    this.tap = !this.tap;
  }

  callFunction(e) {
    if(e == 'tapped') {
      this.tapped();
    }
  }

}
export class TapList {
  action: string
}

HTML

<button (click)="callFunction(item.action)"> TAP </button>

Answer 2

Stackblitz работает, если я добавляю возврат к функции, а затем назначаю крана в html:

tapped() {
return !this.tap;
}

Затем в html:

 <button (click)="tap = item.action()"> TAP </button>

Итак, в вашем примере:

 switchListGridView() {
 return !this.viewGrid;
 }

 <button *ngIf='!item.seperator' mat-button [disabled]="item.disabled" class="button" [ngClass]="{'pointer': !item.disabled}" [title]="item.tooltip" (click)="viewGrid = item.action()">