javascript - 展开时的 Angular Dropdown 显示在屏幕底部

Question

What the webpage looks like

所以我正在尝试制作一个下拉菜单，但是当单击下拉菜单时，它显示的不是与其他输入重叠，而是显示在屏幕底部。

这是相关的 HTML 代码块:

                <div class="form-row">
                   <!-- Grid column -->
                   <div class="col-md-6">
                      <mat-form-field>
                         <mat-label>Toppings</mat-label>
                         <mat-select [formControl]="toppings" multiple>
                            <mat-option *ngFor="let topping of toppingList" [value]="topping">{{topping}}</mat-option>
                         </mat-select>
                      </mat-form-field>
                   </div>
                   <!-- Grid column -->
                   <!-- Grid column -->
                   <div class="col-md-6">
                      <!-- Material input -->
                      <div class="md-form form-group">
                         <input mdbInput type="password" class="form-control" id="inputPassword4MD" placeholder="John's Law Firm">
                         <label for="inputPassword4MD">Firm Name</label>
                      </div>
                   </div>
                   <!-- Grid column -->
                </div>
                <!-- Grid row -->

这是ts文件的相关部分:

toppings = new FormControl();
  toppingList: string[] = ['Extra cheese', 'Mushroom', 'Onion', 'Pepperoni', 'Sausage', 'Tomato'];
  constructor() { }

最后，这是我的 app.module.ts:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { NavbarComponent } from './navbar/navbar.component';
import { AboutComponent } from './about/about.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { HomeComponent } from './home/home.component';
import {MatButtonModule,MatIconModule} from '@angular/material';
import { ContactComponent } from './contact/contact.component';
import { ServicesComponent } from './services/services.component';
import { ScheduleComponent } from './schedule/schedule.component';
import {MatInputModule} from '@angular/material/input';
import {FormsModule, ReactiveFormsModule} from '@angular/forms';
import {MatSelectModule} from '@angular/material/select';

@NgModule({
  declarations: [
    AppComponent,
    NavbarComponent,
    AboutComponent,
    HomeComponent,
    ContactComponent,
    ServicesComponent,
    ScheduleComponent,
    ContactComponent,
    ServicesComponent,
    ScheduleComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    MatButtonModule,
    MatIconModule,
    MatInputModule,
    FormsModule,
    ReactiveFormsModule,
    MatSelectModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Answer 1

您的 styles.scss 文件中需要一个 Angular Material 核心主题。只需在 styles.scss 中添加:

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

或您想要的任何其他主题。您需要组件的核心主题才能正常运行，如果您不喜欢核心默认颜色，则可以创建自定义主题。