如何使用 Mat-Select 属性 [Selected]

Question

我有一个允许翻译 pipng 的组件（通过资产下的 .json 文件）。它与默认选择框完美配合，可以选择我们希望显示的语言。如下所示（效果很好）

  <select #langSelect (change)="translate.use(langSelect.value)">
   <option *ngFor="let lang of translate.getLangs()" 
   [value]="lang" 
   [selected]="lang === translate.currentLang">{{ lang }}
   </option>
   </select>

但为了让它看起来更好，我想用mat-select下面我尝试实现的方式来实现这个逻辑。

带垫选择

  <mat-form-field>
    <mat-select #langSelect (change)="translate.use(langSelect.value)"  
     placeholder="Select offer" 
    formControlName="promo" [(value)]="selected">
    <mat-option *ngFor="let lang of translate.getLangs()" 
    [value]="lang" 
    [selected]="lang === translate.currentLang"
     >{{ lang }}
    <i class="material-icons">info</i>
    </mat-option>
    </mat-select>
    </mat-form-field>

当我运行此代码时，由于mat-option标记内未知的 [selected] 绑定而发生错误。我不知道是否有任何方法可以无错误地实现它。这里控制台中的错误发生在下面

错误

Uncaught Error: Template parse errors:
No provider for NgControl ("">{{ lang }}</option>
                              </select> -->
                                  [ERROR ->]<select #langSelect (change)="translate.use(langSelect.value)"  placeholder="Select offer" formContro"): ng:///AppModule/HeaderComponent.html@17:34

应用程序模块.ts

  import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {FlexLayoutModule} from '@angular/flex-layout';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { MaterialModule } from './material.module';
import { SignupComponent } from './auth/signup/signup.component';
import { LoginComponent } from './auth/login/login.component';
import { TrainingComponent } from './training/training.component';
import { CurrentTrainingComponent } from './training/current-training/current-training.component';
import { NewTrainingComponent } from './training/new-training/new-training.component';
import { PastTrainingComponent } from './training/past-training/past-training.component';
import { WelcomeComponent } from './welcome/welcome.component';
import { FormsModule } from '@angular/forms';
import { HeaderComponent } from './navigation/header/header.component';
import { SidenavListComponent } from './navigation/sidenav-list/sidenav-list.component';
import { StopTrainingComponent } from './training/current-training/stop-training-component';
import { AuthService } from './auth/auth.service';
import {TranslateModule, TranslateLoader} from '@ngx-translate/core';
import {TranslateHttpLoader} from '@ngx-translate/http-loader';
import { HttpClient, HttpClientModule } from '@angular/common/http';


    export function HttpLoaderFactory(httpClient: HttpClient) {
      return new TranslateHttpLoader(httpClient);
    }


    @NgModule({
      declarations: [
        AppComponent,
        SignupComponent,
        LoginComponent,
        TrainingComponent,
        CurrentTrainingComponent,
        NewTrainingComponent,
        PastTrainingComponent,
        WelcomeComponent,
        HeaderComponent,
        StopTrainingComponent,
        SidenavListComponent
      ],
      imports: [
        BrowserModule,
        HttpClientModule,
        TranslateModule.forRoot({
          loader: {
            provide: TranslateLoader,
            useFactory: HttpLoaderFactory,
            deps: [HttpClient]
          }
        }),
        FormsModule,
        AppRoutingModule,
        BrowserAnimationsModule,
        MaterialModule,
        FlexLayoutModule
      ],
      //To use always same AuthService object
      providers: [AuthService],
      bootstrap: [AppComponent],
      entryComponents:[StopTrainingComponent]
    })
    export class AppModule { }

Answer 1

您可以在此处查看文档和示例： https ://material.angular.io/components/select/examples

还有一个精选的例子。

第一个问题是，selected 不适用于 mat-option。

您需要做的是，在您的 component.ts 文件中，您需要从数组中找到选定的元素，并将其设置为变量。

然后在您的 mat-select 中，将 [(value)] 属性设置为该变量。它将使其被选中。

例子：

  <mat-select [(value)]="selected">
    <mat-option>None</mat-option>
    <mat-option value="option1">Option 1</mat-option>
    <mat-option value="option2">Option 2</mat-option>
    <mat-option value="option3">Option 3</mat-option>
  </mat-select>