模板解析错误 mdb card is not known element答案

【问题标题】：template parse errors mdb card is not known element模板解析错误 mdb card is not known element
【发布时间】：2020-01-28 05:46:02
【问题描述】：

我正在开发 Angular 应用程序，我正在使用带有 Angular 材料和 bootstrap4 的 mdbbootstrap 表单，我安装了这两个，但是在编译时给我一个错误：模板解析错误 mdb-card 不是已知元素

我尝试添加模块...但它不起作用

<mdb-card>



  <!--Card content-->
  <mdb-card-body class="px-lg-5 pt-0">

    <!-- Form -->
    <form class="text-center" style="color: #757575;">

      <!-- Name -->
      <div class="md-form mt-3">
        <input type="text" id="materialContactFormName" class="form-control" mdbInput>
        <label for="materialContactFormName">Name</label>
      </div>

      <!-- E-mail -->
      <div class="md-form">
        <input type="email" id="materialContactFormEmail" class="form-control" mdbInput>
        <label for="materialContactFormEmail">E-mail</label>
      </div>

      <!-- Subject -->
      <span>Subject</span>
      <div class="row">
        <div class="col-md-12 mx-auto">
          <mdb-select [options]="optionsSelect" placeholder="Choose your option"></mdb-select>
        </div>
      </div>

      <!--Message-->
      <div class="md-form">
        <textarea type="text" id="materialContactFormMessage" class="form-control md-textarea" mdbInput></textarea>
        <label for="materialContactFormMessage">Message</label>
      </div>

      <!-- Copy -->
      <div class="row">
        <div class="col-md-6 mx-auto d-flex justify-content-center">
          <mdb-checkbox>Send me a copy of this message</mdb-checkbox>
        </div>
      </div>

      <!-- Send button -->
      <button mdbBtn color="info" outline="true" rounded="true" block="true" class="z-depth-0 my-4 waves-effect" mdbWavesEffect
        type="submit">Send</button>

    </form>
    <!-- Form -->

  </mdb-card-body>

</mdb-card>

【问题讨论】：

我在代码中没有看到任何 mdb-card，可能它在另一个组件上
能否分享您的 app.module.ts 页面以便我们看到导入？
好吧，我会发布我的 app.module.ts 代码
现在我添加了 MDBBootstrapModule mdb 卡成为已知元素，但现在我遇到了 mdb 选择问题（无法绑定到“选项”，因为它不是“mdb-”的已知属性选择'。）

标签： angular bootstrap-4 angular-material

【解决方案1】：

    import { BrowserModule } from '@angular/platform-browser';
    import { HttpClientModule } from '@angular/common/http';
    import { NgModule } from '@angular/core';
    import { ReactiveFormsModule, FormsModule } from '@angular/forms';


    import { MDBBootstrapModule } from 'angular-bootstrap-md';
    import {MatExpansionModule} from '@angular/material/expansion';




import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { LandingPageComponent } from './landing-page/landing-page.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import {
  MatCardModule, MatToolbarModule, MatButtonModule, MatIconModule, MatSelectModule, MatMenuModule
  , MatDividerModule, MatInputModule, MatProgressBarModule, MatSidenavModule, MatListModule
} from '@angular/material';
import { HomeComponent } from './home/home.component';
import { LoadPipe } from './home/load.pipe';
import { GraphQLModule } from './graphql.module';
import { InsertComponent } from './form/insert.component';
import { StudentService } from './students.service';
import { FetchComponent } from './fetch/fetch.component';

const material = [MatCardModule, MatToolbarModule, MatButtonModule, MatIconModule, MatSelectModule, MatMenuModule
  , MatDividerModule, MatInputModule, MatProgressBarModule, MatSidenavModule, MatListModule];
@NgModule({
  declarations: [
    AppComponent,
    LandingPageComponent,
    HomeComponent,
    InsertComponent,
    FetchComponent,
    LoadPipe
  ],
  imports: [
    BrowserModule,
    ReactiveFormsModule,
    HttpClientModule,
    AppRoutingModule,
    ...material,
    BrowserAnimationsModule,
    GraphQLModule,
    FormsModule,
    MDBBootstrapModule.forRoot(),
    MDBBootstrapModule,
    MatExpansionModule


  ],
  providers: [ StudentService],
  bootstrap: [AppComponent]
})
export class AppModule {
  constructor() {}
}

【讨论】：