<mat-label> 不是已知元素

Question

我是 Angular 和 Material 设计的新手。我正在尝试在对话框中获取表单。编译时，我收到很多错误，例如 'mat-form-field' is not a known element

我的app-module.ts:

    
    import { MatDialogModule } from '@angular/material/dialog';
    import { MatFormFieldModule } from '@angular/material/form-field';
    import { MatSelectModule } from '@angular/material/select';
    import { MatInputModule } from '@angular/material/input';
    ...
    imports: [
     MatDialogModule,
     MatFormFieldModule,
     MatSelectModule,
     MatInputModule
    ]

在我的 component.ts 文件中：

    import { Component, OnInit, Inject } from '@angular/core';
    import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
    import { MatFormFieldModule } from '@angular/material/form-field';
    import { MatInputModule } from '@angular/material/input';
    import { MatSelectModule } from '@angular/material/select';
    
    
    @Component({
      selector: 'app-bottle-list',
      templateUrl: './bottle-list.component.html',
      styleUrls: ['./bottle-list.component.css']
    })
    export class BottleListComponent implements OnInit {
    
      dataSource: Array<any>;
      displayedColumns: string[] = ['picture', 'name', 'number', 'volume', 'price', 'alcoholType', 'actions'];
      bottle: Bottle;
      passedValues: object;
      marque: string;
      nombre: string;
      volume: string;
      priceInCentsFor1Cl: string;
      alcohol: Alcohol;
      alcohols: Array<any>;
    
      constructor(private bottleService: BottleService, private dialog: MatDialog, private alcoholService: AlcoholService) { }
    
      ngOnInit(): void {
      }
    
      addBottle(): void {
        const dialogRef = this.dialog.open(AddBottle, {
          width: '250px',
          data: { marque: this.marque, volume: this.volume, priceInCentsFor1Cl: this.priceInCentsFor1Cl, nombre: this.nombre, alcohol: this.alcohol }
        });
    
        dialogRef.afterClosed().subscribe(result => {
          console.log('The dialog was closed');
          console.log('All the data', result);
          this.passedValues = result;
        });
      }
    }
    
    @Component({
      selector: 'add-bottle',
      templateUrl: 'add-bottle.html',
    })
    export class AddBottle {
    
      constructor(
        public dialogRef: MatDialogRef<AddBottle>,
        @Inject(MAT_DIALOG_DATA) public data: DialogData) { }
    
      onNoClick(): void {
        this.dialogRef.close();
      }
    }

在我的组件中，我有 2 个 html 文件，每个文件都链接到 ts 文件的 @Component 之一。 addBottle.html 是我的模式，看起来像：

       <h2 mat-dialog-title>Ajouter</h2>
    <p>
      <mat-form-field appearance="standard">
        <mat-label>marque</mat-label>
        <input matInput placeholder="Votre bouteille" [(ngModel)]="data.marque">
      </mat-form-field>
    </p>

与其他几个领域。我想知道第二个组件是否只是没有在文件开头进行导入？我该如何修复这些编译错误？

感谢您的帮助。

Answer 1

感谢@Yuriy 重点是添加

import { AddBottle } from './components/bottle-list/bottle-list.component'

到我的应用程序-module.ts

<mat-label> 不是已知元素

<mat-label> is not a known element

material-design

angular-material

angular