我有一个允许翻译 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>
当我运行此代码时,由于内部未知的 [selected] 绑定而发生错误mat-option
标签。我不知道有什么方法可以无错误地实现它。这里控制台中出现错误
ERROR
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 { }