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 меняет поля на div с css классов для создания макета. В Angular 9 это не так.

Я пробовал установить более раннюю и более позднюю версии @ angular / material - безрезультатно.

Вот пакет. 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"
  },

Вот пакет. 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

Попробуйте сделать это для отображения ваших параметров:

Html теги:

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

Интерфейс машинописного текста

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'}   
   ];
}

Answer 2

Мне нужно внести следующие изменения в файл 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';