发送按钮的值不起作用 [角度材质引导]

Question

嘿，我尝试将按钮的值发送到这样的函数

<button #mybtn value="somthing" (click)="filterTable(mybtn.value)" mat-stroked-button>mybtn</button>

在我的 TS 组件中：

filterTable(filterValue) {
console.log(filterValue);
}

它控制台 不藐视

但是当我像这样在没有引导程序的情况下制作我的按钮时

<button #mybtn value="Somthing" (click)="filterTable(mybtn.value)">mytn</button>

这种方式是控制台"Somthing"和工作。 为什么？？？

Answer 1

您可以尝试通过以下方式访问该值：

<button #mybtn="matButton" value="Test" (click)="filterTable(mybtn._getHostElement().value)" mat-stroked-button>Basic</button>

但这是一个黑客，因为我们使用的是来自Material的私有API。为什么不直接将值传递到 filterTable 调用中？

<button #mybtn="matButton" (click)="filterTable('Test')" mat-stroked-button>Basic</button>

堆栈闪电战：https://stackblitz.com/edit/angular-81dzfr?file=app/button-types-example.html

Answer 2

您需要访问本机元素才能获取值。 将此添加到您的 .ts 文件

import { Component, ElementRef, ViewChild } from '@angular/core';
...
export class SomeComponent {
@ViewChild('mybtn', {static: false}) mybtn: ElementRef;
...
public filterTable() {
console.log(this.mybtn.nativeElement.value)
}

从logButton方法中省略参数，使其变为

(click)="filterTable()"

Answer 3

<button #mybtn value="somthing" (click)="filterTable(mybtn)" mat-stroked-button>mybtn</button>

并在您的 .ts 中

filterTable(mybtn) {
console.log(mybtn.value);
}
something like this

Answer 4

为什么你的 htlmElement 没有类属性？ 您也可以使用 [ngClass]="'yourClass'" 添加类