1

我是角度（6）的新手。我在表单中使用了 MatSelectModule。它工作正常，但它的风格很奇怪，就像选项放在页面底部的某个地方一样。我已经尝试过这种方式，但失败了。帮我找出原因。这里有一些行，你需要分析。谢谢你。

在 XYZ.component.html

             <mat-form-field>
                <mat-select placeholder="Toppings" formControlName="toppings" multiple>
                  <mat-option *ngFor="let topping of toppingList" [value]="topping">{{topping}}</mat-option>
                </mat-select>
              </mat-form-field>

在 XYZ.component.ts

toppingList: string[] = ['Extra cheese', 'Mushroom', 'Onion', 'Pepperoni', 'Sausage', 'Tomato'];

在 app.component.ts

import { MatInputModule, MatButtonModule, MatSelectModule, MatIconModule } from '@angular/material';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    HttpClientModule,
    FormsModule,
    ReactiveFormsModule,
    MatInputModule,
    MatButtonModule,
    MatSelectModule,
    MatIconModule,
    BrowserAnimationsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
4

1 回答 1

2

您是否在您的应用程序中包含了预构建的主题 css？

根据文档，您可以使用其中一个预建主题或定义自定义主题

您可以从 @angular/material/prebuilt-themes 将主题文件直接包含到您的应用程序中

可用的预建主题：

  • deeppurple-amber.css
  • 靛蓝粉红色.css
  • 粉红色-bluegrey.css
  • 紫绿.css

如果您使用的是 Angular CLI，这就像在您的 styles.css 文件中包含一行一样简单：

@import '~@angular/material/prebuilt-themes/deeppurple-amber.css';

或者，您可以直接引用该文件。这看起来像：

<link href="node_modules/@angular/material/prebuilt-themes/indigo-pink.css" rel="stylesheet">
于 2018-10-02T16:46:12.287 回答