Question

目标：当用户在下拉菜单中选择值时进入IF块

问题：即使调试器显示该值为true，也不会进入条件块。难道是因为html中的任何内容吗？那里有一些小的更改，但是主要是如何嵌套的，因此我可以在页面上放置其他内容。其他一切保持不变

我尝试过的事情：

浏览HTML

使用Chrome调试器

使用控制台注释掉除了一行以外的所有内容。

HTML ：

<form [formGroup]="_siteForm">
    <div class="title-container">
        <mat-card-title class="text-center" i18n="@@MoVeSeLo_H1_1">
            Please Sign In
        </mat-card-title>

        <mat-form-field class="language-field">
            <mat-select (selectionChange)="doSomething($event)" [value]="languages[i]">
                <mat-option *ngFor="let language of languages" [value]="language">
                    {{language.viewValue}}
                </mat-option>
            </mat-select>
        </mat-form-field>
    </div>
</form>

打字稿：

//Array for dropdown
public languages = [
    { value: "en", viewValue: 'English' },
    { value: "es", viewValue: 'Spanish' }
     ];

//Sets default value for dropdown
if (this.localeId == "en" || this.localeId == "en-US") { this.i = 0; }
else { this.i = 1; }

//Event code when user selects an option from the dropdown
doSomething(event) {
        console.log("in doSomething()");
        //if value selected is spanish
        if (event.value == "es") {
            console.log("event.value == ES");
        }
        else if (event.value == "en") { console.log("event.value == EN"); }

    }

调试器（这是 event 对象）：

值：“ es”

viewValue：“西班牙语”

如果event.value是es，那么为什么if块被跳过（并且console.log没有被打印）？

Answer 1

您的代码不起作用，因为您正在向函数传递$event，因此当前选择的值即语言对象，您将获得：

event.value -- gives {value: "en", viewValue: "English"}

解决方案1：

现在您要检查从对象中选择的值，然后必须使用：

event.value.value -- gives "en"

解决方案2：

更改：

<mat-option *ngFor="let language of languages" [value]="language">

收件人

<mat-option *ngFor="let language of languages" [value]="language.value">

那么您当前的代码就可以了！

解决方案3：

您可以在mat-option上使用click事件，并将language对象传递给doSomething()方法：

<mat-form-field class="language-field">
    <mat-select>
        <mat-option *ngFor="let language of languages" (click)="doSomething(language)" [value]="language">
            {{language.viewValue}}
        </mat-option>
    </mat-select>
</mat-form-field>

编辑：

要绑定默认值，您可以将[compareWith]的@Input（）控制属性用于mat-select：

在TS中添加以下功能：

defaultValue: any = { value: "es", viewValue: "Spanish" };  // your selected value object

compareValues(obj: any, targetObj: any) {
  if (obj.value == targetObj.value) {
    return true;
  } else {
    return false;
  }
}

HTML修改：

为[(ngModel)]添加了选定的值
添加了[compareWith]函数

<mat-form-field class="language-field">
    <mat-select (selectionChange)="doSomething($event)" [compareWith]="compareValues" [(ngModel)]="defaultValue">
        <mat-option *ngFor="let language of languages" [value]="language">
            {{language.viewValue}}
        </mat-option>
    </mat-select>
</mat-form-field>

Working_Demo

如果即使调试器显示条件为真也未输入块

1 个答案: