Question

我了解如何从打字稿中打开mat-menu。我的问题是通常在HTML中，数据将由[matMenuTriggerData]="{ data: input }"传递并由matMenuContent接收。这是我尝试过的：

@ViewChild(MatMenuTrigger) private menuTrigger: MatMenuTrigger;

...

this.menuTrigger.menuData = this.data[i];
this.menuTrigger.openMenu();

正确设置调试menuData时，但菜单打开后，接收到的数据将不确定

// Child Component
@Input('data')
public set dataInput(data)
{
    this.value = data.Value; <--- error
}

页面上有许多触发器，可以使用不同的数据打开同一菜单。打开一个菜单后，用户应该可以转到下一个或上一个菜单，这就是为什么我需要能够通过打字稿进行操作的原因。

HTML：

<ng-container *ngFor="let input of this.formInputs[base64data.index]">
    <area [matMenuTriggerFor]="editMatMenu" [matMenuTriggerData]="{ data: input }" shape="rect" [attr.data-name]="input.Name" [attr.coords]="input.Rect" />
</ng-container>

Answer 1

如果您的[matMenuTriggerData]指令已经添加到组件中，那么放置一个变量以绑定到HTML元素就可以了。

即。在您的.ts文件中

this.menuData = this.data[i];

并在您的html文件中

<input [matMenuTriggerData]="menuData"/>

Answer 2

原来，我在想这是错误的方式。由于我已经有许多触发器并附带了正确的数据，因此只需要打开正确的触发器即可。

@ViewChildren(MatMenuTrigger) private menuTriggers: QueryList<MatMenuTrigger>;

然后我遍历触发器，直到找到正确的menuData.data

触发器为止。

for (let i: number = this.menuTriggers.toArray().length - 1; i >= 0; i--)
{
    if (this.menuTriggers.toArray()[i].menuData.data.Name == this.currentInput.Name)
    {
        triggerIndex = i;
        break;
    }
}

我还找到了一种通过点击处理程序从ts完全完成此操作的方法

public openMenu(input): void
{
    this.menuTrigger.menuData = { data: input };
    this.menuTrigger.openMenu();
}

代替

[matMenuTriggerData]="{ data: input }

以编程方式将数据传递给MatMenuTrigger

2 个答案: