【问题标题】：Action not affect html file操作不影响 html 文件
【发布时间】：2020-02-13 10:18:29
【问题描述】：

我对 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>

在我看来它应该可以工作，但是在我按下按钮后没有任何反应。在控制台日志中它工作正常 - 显示真假，但 ngIf 不起作用。它应该像显示或分散整个 mat-grid 列表一样工作。

更新 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

【问题讨论】：

你能发一个stackblitz吗
你在哪里调用switchListGridView()这个函数？
@AmanGojariya 看看 #update1
你能试试行动吗：this.switchListGridView() this？
类型 'void' 不能分配给类型 '(element: any) => void'。但我不明白你的意思。调用了操作，我可以在控制台中看到它。值从 false 变为 true 等。

标签： angular angular-material

【解决方案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>

【讨论】：

仍然可以使用 'this' 前缀（刚刚尝试过！），例如测试：布尔=真； ...
您在组件装饰器中将更改检测方法设置为什么？感谢@JP 没有意识到这一点！
好的，我在编辑 2 中添加了 stacklbitz - 它也不起作用。
看起来是因为您的函数正在转换为字符串。为什么不调用泛型函数而不是注入它？
因为我需要制作许多具有不同操作的按钮，并且不想在 html 中获得 10 页的 a4

【解决方案2】：

如果我添加一个返回函数然后分配给 html 中的点击，Stackblitz 就可以工作：

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()">

【讨论】：