<mat-label> 不是已知元素答案

【问题标题】：<mat-label> is not a known element<mat-label> 不是已知元素
【发布时间】：2021-02-25 18:52:00
【问题描述】：

我是 Angular 和 Material Design 的新手。我正在尝试在对话框中获取表单。编译时出现很多错误，例如'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>

还有其他几个字段。我想知道第二个组件是否只是没有在文件开头进行导入？我该如何解决这些编译错误？

感谢您的帮助。

【问题讨论】：

组件在哪里声明，在 AppModule 中？如果没有，那么您希望将 MatFormFieldModule 导入到声明这些组件的模块
其中只声明了第一个。我也会尝试声明 AddBottle。
这就是重点，谢谢！

标签： angular angular-material material-design

【解决方案1】：

感谢@Yuriy 重点是添加

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

到我的 app-module.ts

【讨论】：