Angular 9 材料垫选择布局格式不正确

Question

我有以下代码：

<mat-form-field id="citydropdown"  >
<mat-select placeholder="Office" class="useroptions" name="office"  [(value)]="cityid" >
<mat-option [value]="">Firm-wide</mat-option>
<mat-option [value]="4" >Century City</mat-option>
<mat-option [value]="1" >Los Angeles</mat-option>
<mat-option [value]="2" >Orange County</mat-option>
<mat-option [value]="3" >San Diego</mat-option>
<mat-option [value]="5" >San Francisco</mat-option>
</mat-select>
</mat-form-field>

使用 Angular/cli 7.2.3 @angular/material 7.2.3

在我将 Angular/cli 升级到 9.1.8 - @angular/material 9.1.3 后，布局不再有效

Angular 7 版本使用 css 类将字段更改为 div 以创建布局。 在 Angular 9 中，情况并非如此。

我尝试安装 @angular/material 的早期和更高版本 - 无济于事。

这是工作版本的 package.json 依赖项：

"dependencies": {
    "@angular-devkit/architect": "^0.13.9",
    "@angular-devkit/core": "^7.3.9",
    "@angular-devkit/schematics": "^7.3.9",
    "@angular/animations": "^7.2.16",
    "@angular/cdk": "^7.3.7",
    "@angular/common": "^7.2.16",
    "@angular/compiler": "^7.2.16",
    "@angular/core": "^7.2.16",
    "@angular/forms": "^7.2.16",
    "@angular/http": "^7.2.16",
    "@angular/material": "^7.3.7",
    "@angular/platform-browser": "^7.2.16",
    "@angular/platform-browser-dynamic": "^7.2.16",
    "@angular/platform-server": "^7.2.16",
    "@angular/router": "^7.2.16",
    "@ng-bootstrap/ng-bootstrap": "^4.0.2",
    "angular-in-memory-web-api": "^0.6.1",
    "angular-include-replace": "^1.0.0",
    "angular-inline-svg": "0.0.782",
    "angular-svg": "^2.0.8",
    "bootstrap": "^4.3.1",
    "classlist.js": "^1.1.20150312",
    "core-js": "^2.6.3",
    "express": "^4.16.4",
    "hammerjs": "^2.0.8",
    "jquery": "^3.4.1",
    "ng-inline-svg": "^8.3.0",
    "ngx-bootstrap": "^3.2.0",
    "ngx-pagination": "^3.2.1",
    "only": "0.0.2",
    "package-lock-only": "0.0.4",
    "package-lock.json": "^1.0.0",
    "popper.js": "^1.14.3",
    "rxjs": "^6.3.3",
    "rxjs-compat": "^6.4.0",
    "svg.js": "^2.7.1",
    "tslib": "^1.9.3",
    "web-animations-js": "^2.3.1",
    "zone.js": "^0.8.29"
  },

这是 package.json 用于不工作的那个

"dependencies": {
    "@angular-devkit/architect": "^0.901.8",
    "@angular-devkit/core": "^9.1.8",
    "@angular-devkit/schematics": "^9.1.8",
    "@angular/animations": "^9.1.11",
    "@angular/cdk": "^9.2.4",
    "@angular/cli": "^9.1.8",
    "@angular/common": "^9.1.11",
    "@angular/compiler": "^9.1.11",
    "@angular/core": "^9.1.11",
    "@angular/forms": "^9.1.11",
    "@angular/http": "^7.2.16",
    "@angular/material": "^9.1.3",
    "@angular/platform-browser": "^9.1.11",
    "@angular/platform-browser-dynamic": "^9.1.11",
    "@angular/platform-server": "^9.1.11",
    "@angular/router": "^9.1.11",
    "@ng-bootstrap/ng-bootstrap": "^6.1.0",
    "angular-in-memory-web-api": "^0.11.0",
    "angular-include-replace": "^1.0.0",
    "angular-inline-svg": "0.0.911",
    "angular-svg": "^2.0.8",
    "bootstrap": "^4.5.0",
    "classlist.js": "^1.1.20150312",
    "core-js": "^3.6.5",
    "express": "^4.17.1",
    "hammerjs": "^2.0.8",
    "jquery": "^3.5.1",
    "ng-inline-svg": "^10.1.0",
    "ngx-bootstrap": "^5.6.1",
    "ngx-pagination": "^5.0.0",
    "popper.js": "^1.16.1",
    "rxjs": "^6.5.5",
    "rxjs-compat": "^6.5.5",
    "svg.js": "^2.7.1",
    "tslib": "^2.0.0",
    "typescript": "^3.7.5",
    "web-animations-js": "^2.3.2",
    "webpack": "^4.43.0",
    "zone.js": "^0.10.3"
  },

Answer 1

我需要对 app.module.ts 文件进行以下更改

从：

import { MatButtonModule, MatCheckboxModule, MatSelectModule, MatTabsModule, MatRadioModule, MatMenuModule, MatTooltipModule } from '@angular/material';

至：

import { MatFormFieldModule } from '@angular/material/form-field';
import { MatSelectModule } from '@angular/material/select';
import { MatButtonModule } from '@angular/material/button';
import { MatCheckboxModule } from '@angular/material/checkbox'; 
import { MatRadioModule } from '@angular/material/radio';
import { MatMenuModule } from '@angular/material/menu';
import { MatTooltipModule } from '@angular/material/tooltip';

Answer 2

尝试这样做以显示您的选项：

Html 标签：

 <mat-select> <mat-option *ngFor="let city of cities" [value]="option.value"> {{option.viewValue}} </mat-option> </mat-select>

Typescript接口

interface City { value: string; viewValue: string; } @Component({ selector: 'your-component', templateUrl: 'your-component.html', styleUrls: ['your-component.css'], }) export class YourComponent { cities: City[] = [ {value: 'lasvegas-0', viewValue: 'Las Vegas'}, {value: 'chicago-1', viewValue: 'Chicago'}, {value: 'columbus-2', viewValue: 'Columbus'} ]; }