Angular matSelect 未填充

Question

我正在尝试使用 matSelect 版本 7.3.7。问题是它没有填充（或者只是没有打开？）。无论我是从数组填充还是手动添加选项都没有关系。当我单击 select 框时，它没有打开。页面中有值。当我检查 html 时，它没有 mat-select 标签下的选项。

此处为简化版：https://stackblitz.com/edit/angular-jrqehn

代码如下所示：

HTML-文件

<mat-form-field *ngIf="pages">
          <mat-label>Välj system</mat-label>
          <mat-select [(value)]="computerGuid">
            <mat-option *ngFor="let page of pages" [value]="page.pageGuid">
              {{page.name}}
            </mat-option>
          </mat-select>
        </mat-form-field>

组件（简体）

pages: PageModel[] = [];

export interface PageModel {
  pageGuid: string;
  name: string;
}

ngOnInit() {
 this.pageService.getPages().subscribe(res => {
  this.pages = res;
  this.spinner.hide();
});
}

模块

import { MatSelectModule } from '@angular/material/select';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';

import { BsDropdownModule } from 'ngx-bootstrap';
import { CookieService } from 'ngx-cookie-service';
import { NgxSmartModalModule } from 'ngx-smart-modal';
import { NgxSpinnerModule } from 'ngx-spinner';

import { LoginRoutingModule } from './login-routing.module';
import { LoginComponent } from './login.component';
import { TagService } from '../../shared';

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    LoginRoutingModule,
    BsDropdownModule,
    MatSelectModule,
    BrowserAnimationsModule,
    NgxSpinnerModule,
    NgxSmartModalModule.forChild(),
  ],
  providers: [TagService, CookieService],
  declarations: [LoginComponent]
})
export class LoginModule { }

提前致谢！

Answer 1

这是解决方案Forked Stackblitz

问题是因为你没有在app模块中添加浏览器动画模块

@import "~@angular/material/prebuilt-themes/indigo-pink.css";

在样式中。css/scss 希望对您有所帮助！

Angular matSelect 未填充

Angular matSelect not populating

angular-material

angular

angular7