Question

请我对角度很新。我正在按照教程，我得到了这个错误。我检查了其他人的错误和解决方案。没有人救了我。

    compiler.js:215 Uncaught Error: Template parse errors:
   'mat-spinner' is not a known element:
1. If 'mat-spinner' is an Angular component, then verify that it is part of 
this module.
2. If 'mat-spinner' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to 
the '@NgModule.schemas' of this component to suppress this message. ("

<button mat-raised-button (click)="showAnswer()">Answer Me</button>
[ERROR ->]<mat-spinner [style.display]="showSpinner ? 'block' : 'none'"> 
</mat-spinner>
</mat-card>

"): ng:///AppModule/AppComponent.html@21:2
'hi' is not a known element:
1. If 'hi' is an Angular component, then verify that it is part of this 
module.
2. To allow any element add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of 
this component. ("

<mat-card *ngIf="answerDisplay">
[ERROR ->]<hi>{{answerDisplay}}</hi>
</mat-card>

"): ng:///AppModule/AppComponent.html@25:2
at syntaxError (compiler.js:215)
at TemplateParser.push../
node_modules/@angular/compiler/fesm5/compiler.js.TemplateParser.parse
(compiler.js:14702)
at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._parseTemplate (compiler.js:22709)
at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileTemplate (compiler.js:22696)
at compiler.js:22639
at Set.forEach (<anonymous>)
at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileComponents (compiler.js:22639)
at compiler.js:22549
at Object.then (compiler.js:206)
at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileModuleAndComponents (compiler.js:22548)

那是错误。 这是我的app.component.html

    <!--The content below is only a placeholder and can be replaced.-->
<mat-toolbar color="primary">
<mat-toolbar-row>
 <span>MyMaterial</span>

<span class="example-spacer"></span>

<button mat-button>About</button>
<button mat-button>Services</button>
<button mat-button>Contact</button>
</mat-toolbar-row>
</mat-toolbar>

<mat-card>
<mat-form-field>
<input matInput[(ngModel)]="answer" placeholder="Enter something..">
</mat-form-field>

<br>

<button mat-raised-button (click)="showAnswer()">Answer Me</button>
<mat-spinner [style.display]="showSpinner ? 'block' : 'none'"></mat-spinner>
</mat-card>

<mat-card *ngIf="answerDisplay">
<hi>{{answerDisplay}}</hi>
</mat-card>

material.module.ts

    /**
     * Created by regina on 05/15/2018.
 */
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import {
MatButtonModule, MatCardModule, MatFormFieldModule, MatInputModule, 
MatProgressBarModule,MatToolbarModule } from '@angular/material';

@NgModule({
imports: [MatButtonModule, MatToolbarModule, MatInputModule, 
 MatProgressBarModule, MatCardModule, MatFormFieldModule],
exports: [MatButtonModule, MatToolbarModule, MatInputModule, 
 MatProgressBarModule, MatCardModule, MatFormFieldModule]

  })

   export class MaterialModule { }

正如我之前所说，我在这里检查了类似我自己的问题......没有人可以解决我的问题。给出的大多数解决方案已经在我的代码中。我需要了解角度材料。请任何帮助将非常感谢。我被卡住了！非常感谢你提前！

Answer 1

导入 MatProgressSpinnerModule t使用mat-spinner。

请参阅文档https://material.angular.io/components/progress-spinner/api

    /**
     * Created by regina on 05/15/2018.
 */
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import {
MatButtonModule, MatCardModule, MatFormFieldModule, MatInputModule, 
MatProgressBarModule,MatToolbarModule ,
MatProgressSpinnerModule} from '@angular/material';

@NgModule({
imports: [MatButtonModule, MatToolbarModule, MatInputModule, 
 MatProgressBarModule, MatCardModule, MatFormFieldModule,
 MatProgressSpinnerModule],
exports: [MatButtonModule, MatToolbarModule, MatInputModule, 
 MatProgressBarModule, MatCardModule, MatFormFieldModule,
 MatProgressSpinnerModule]

  })

   export class MaterialModule { }

Answer 2

在 MatProgressSpinnerModule

下添加 AppModule.ts

 import {
  MatFormFieldModule,
  MatProgressBarModule,
  MatProgressSpinnerModule,
} from '@angular/material';

未捕获错误：模板解析错误

2 个答案: