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-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]绑定而发生错误。我不知道有没有办法实现它而没有错误。这里控制台中的错误发生在下面< / p>

错误

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

App.Module.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

还有一个选定的示例。

第一个问题是，所选内容不适用于mat-option。

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

然后在选择垫中，将[（value）]属性设置为该变量。它将被选中。

示例：

{
   "took": x,
   "errors": true,
   "items":[
   //element i: shows what happened with the item i from bulk
   ]
}

如何将Mat-Select与属性一起使用[已选择]

1 个答案: