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

Question

我卡在 Angular 以显示新值。

值“X”旁边有一个 3 点弹出菜单。在此菜单中，我的目标是选择一个新值并将值“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 {

  }

Answer 1

嘿，我创建了一个快速 Stackblitz

html

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

ts

  val = 'X';

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

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

这是你想要的吗？

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

Popup menu / display new value in Angular

popupmenu

ngfor

angular