Question

你好，我试图在mat-select中设置一个默认值，并在component.ts中使用多个选项，但我设法这样做，但是当我以编程方式设置默认值时，应该执行的方法是值更改，不执行，除非我手动更改值，否则我正在对方法使用（change）指令触发器，还有其他可以使用的值吗？就像其他指令一样。

我现在正在使用ngModel设置默认值，将值设置为object.attribute

<mat-select [compareWith]="compareBasic" id="object" name="object" 
                    [(ngModel)]="object.attribute" (change)="methodThatIWantToTrigger" class="full-width"
                    required> </mat-select>

我应该在mat-select中有多个选项，但是如果只有一个选项，则我想默认选择该值，并且我需要知道选择该值以便从数据库中获取一些数据。我正在做这样的事情：

if (this.array.length == 1){ // if it has only one option
        this.object.attribute = this.array[0];
}

但这会导致某些错误或失败。

Answer 1

由于您有两种与[(ngModel)]进行数据绑定的方式，因此可以使用(ngModelChange)代替(change)。值更改时触发。这是stackblitz example

Answer 2

这是因为mat-select具有Criteria:=事件，并且仅在selectionChange发生更改时才会触发

用户更改所选值时发出的事件。（angular material docs）

如果您要发出此user，则必须尝试以编程方式触发事件，但应避免这种情况。也许您可以在代码中调用此方法？给我们您的用例，也许有更好的方法。

编辑

由于您的用例，可以使用selectionChange，因此，基本上，如果您设置了默认值并且要确保在UI中选择了默认值，则可以执行以下操作。有点hacky，但是可以用。

ChangeDetectorRef.detectChanges()

也不要忘记将其添加到if (this.array.length == 1){ // if it has only one option this.object.attribute = this.array[0]; // this will force to refresh value in mat-select this.cdr.detectChanges() // here you can call your `methodThatIWantToTrigger` becaucse the view is updated. }中的constructor中并将其导入更改

component.ts

如何在组件中为Mat-select触发（更改）设置默认值

2 个答案:

编辑