Question

当我想使用棱角材料时。我出错了。

<mat-accordion>
  <mat-expansion-panel>
    <mat-expansion-panel-header>
      <mat-panel-title>
        Personal data
      </mat-panel-title>
      <mat-panel-description>
        Type your name and age
      </mat-panel-description>
    </mat-expansion-panel-header>

    <mat-form-field>
      <input matInput placeholder="First name">
    </mat-form-field>

    <mat-form-field>
      <input matInput placeholder="Age">
    </mat-form-field>
  </mat-expansion-panel>
  <mat-expansion-panel (opened)="panelOpenState = true"
                       (closed)="panelOpenState = false">
    <mat-expansion-panel-header>
      <mat-panel-title>
        Self aware panel
      </mat-panel-title>
      <mat-panel-description>
        Currently I am {{panelOpenState ? 'open' : 'closed'}}
      </mat-panel-description>
    </mat-expansion-panel-header>
    <p>I'm visible because I am open</p>
  </mat-expansion-panel>
</mat-accordion>


<!-- Copyright 2019 Google Inc. All Rights Reserved.
    Use of this source code is governed by an MIT-style license that
    can be found in the LICENSE file at http://angular.io/license -->

我导入了所有相关组件，但是没有任何作用

import {
  MatAutocompleteModule,
  MatBadgeModule,
  MatBottomSheetModule,
  MatButtonModule,
  MatButtonToggleModule,
  MatCardModule,
  MatCheckboxModule,
  MatChipsModule,
  MatDatepickerModule,
  MatDialogModule,
  MatDividerModule,
  MatExpansionModule,
  MatGridListModule,
  MatIconModule,
  MatInputModule,
  MatListModule,
  MatMenuModule,
  MatNativeDateModule,
  MatPaginatorModule,
  MatProgressBarModule,
  MatProgressSpinnerModule,
  MatRadioModule,
  MatRippleModule,
  MatSelectModule,
  MatSidenavModule,
  MatSliderModule,
  MatSlideToggleModule,
  MatSnackBarModule,
  MatSortModule,
  MatStepperModule,
  MatTableModule,
  MatTabsModule,
  MatToolbarModule,
  MatTooltipModule,
  MatTreeModule,
} from '@angular/material';

我得到的错误：

mat-expansion-panel-header'不是一个已知元素：1.如果 'mat-expansion-panel-header'是一个Angular组件，然后验证它是此模块的一部分。

没有文档说明如何申请使用这些元素。

Answer 1

modules与components和Module一起使用。组件将使用的所有内容都必须在AppModule中注册。您需要做的就是将这些材料模块添加到您的@NgModule({ declarations: [], imports: [ MatAutocompleteModule, MatBadgeModule, MatBottomSheetModule, MatButtonModule, MatButtonToggleModule, MatCardModule, MatCheckboxModule, MatChipsModule, MatDatepickerModule, MatDialogModule, MatDividerModule, MatExpansionModule, MatGridListModule, MatIconModule, MatInputModule, MatListModule, MatMenuModule, MatNativeDateModule, MatPaginatorModule, MatProgressBarModule, MatProgressSpinnerModule, MatRadioModule, MatRippleModule, MatSelectModule, MatSidenavModule, MatSliderModule, MatSlideToggleModule, MatSnackBarModule, MatSortModule, MatStepperModule, MatTableModule, MatTabsModule, MatToolbarModule, MatTooltipModule, MatTreeModule, ], bootstrap: [AppComponent] }) export class AppModule { }类中，如下所示：

INFOPLIST_FILE

此文档可以帮助您进一步https://angular.io/guide/architecture-modules

Answer 2

您是否已向相关的NG模块添加了引用，例如app.module.ts

class Dog:
  def __init__(self, name, age):
    self.name = name
    self.age = age

dogs = [Dog('Buddy', 3), Dog('Max', 3), Dog('Charlie', 5), 
    Dog('Cooper', 1), Dog('Jack', 3),Dog('Rocky', 4), Dog('Bear', 1), 
    Dog('Duke', 3), Dog('Ace', 5)]


 grouped_dogs = [(Dog('Buddy', 3), Dog('Max', 3), Dog('Duke', 3)), 
     (Dog('Charlie', 5)), (Dog('Cooper', 1), Dog('Bear', 1)), 
     (Dog('Rocky', 4))] # expected output

Answer 3

请不要忘记将MatExpansionModule中的*.module.ts导入到@angular/material/expansion文件中，

，然后将其添加到imports文件的@NgModule的{{1}}数组中

此后，您将不会遇到与*.module.ts相关的任何错误。

PS：尝试仅导入应用程序所需的那些模块。

为什么我不能使用anguar /材质元素？

3 个答案: