弹出菜单/在 Angular 中显示新值

如何解决弹出菜单/在 Angular 中显示新值

我一直在 Angular 中显示新值。

值“X”旁边有一个 3dots 弹出菜单。在此菜单中，我的目标是选择一个新值并将值“X”替换为新值“Y”或“Z”。我用“displayManagedByValue()”方法尝试了很多东西，但没有任何效果。

有什么想法吗？...

<span>X</span>
 <!-- Popup menu-->
  <span>
   <button mat-icon-button [matMenuTriggerFor]="menu" aria-label="popup menu">
    <mat-icon class="popup-menu">more_vert</mat-icon>
   </button>
   <mat-menu  #menu="matMenu">
    <button *ngFor="let value of managedByValues" (click)="displayManagedByValue(value)" mat-menu-item>
     <span class="managedBy-value">{{value}}</span>
      </button>
       </mat-menu>
        </span>

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

@Component({
  selector: 'app-warehouse',templateUrl: './warehouse.component.html',styleUrls: ['./warehouse.component.scss']
})

export class WarehouseComponent {

  managedByValues: string[] = ['Y','Z'];

  displayManagedByValue(value: string): void {

  }

解决方法

嘿，我创建了一个快速的 Stackblitz

html

<span>{{val}}</span>
 <!-- Popup menu-->
...

ts

  val = 'X';

  managedByValues: string[] = ['Y','Z','X'];

  displayManagedByValue(value: string): void {
    this.val = value;
  }

这是你想要的吗？