角材料html看起来很有趣，如何呈现此正确

Question

我学习了Angular，现在Component html看起来很有趣。这应该是Angual的资料，但是我想念的代码中错过了一些东西！

这是我的search-books.component.html

<mat-card>
  <mat-card-header><mat-card-title>New Contact</mat-card-title></mat-card-header>
  <form [formGroup]="newContact" class="form-container">

    <mat-form-field>
      <input type="text" matInput placeholder="Name" formControlName="name">
      <mat-error *ngIf="formControlName.hasError('required')">
        Name is <strong>required</strong>
      </mat-error>
    </mat-form-field>

    <mat-form-field>
      <mat-select placeholder="Type" formControlName="type">
        <mat-option [value]="1">
          Work
        </mat-option>
        <mat-option [value]="2">
          Cellphone
        </mat-option>
        <mat-option [value]="3">
          Home
        </mat-option>
      </mat-select>
      <mat-error *ngIf="formControlName.hasError('required')">
        Type is <strong>required</strong>
      </mat-error>
    </mat-form-field>

    <mat-form-field>
      <input type="tel" matInput placeholder="Number" formControlName="number">
      <mat-error *ngIf="formControlName.hasError('required')">
        Number is <strong>required</strong>
      </mat-error>
    </mat-form-field>

    <button mat-raised-button class="submitForm" (click)="addContact()">Save</button>
  </form>
</mat-card>
<button mat-raised-button (click)="goBack()" class="backButton" title="Go Back"><i class="material-icons">chevron_left</i>Back</button>

这是它的样子：

这就是我想要的样子：

Answer 1

  

看来，您可能错过了材料模块的导出，或者您没有在应用程序中添加任何默认的材料主题

要创建简单的材质应用，请使用以下命令。

ng add @angular/material

 ng generate @angular/material:materialNav --name myNav
 ng generate @angular/material:materialDashboard --name myDashboard
 ng generate @angular/material:materialTable -- name myTable

例如如果您使用第一个命令生成新的myNav组件，则应该能够在命令行上看到以下输出：

CREATE src/app/my-nav/my-nav.component.css (110 bytes)
CREATE src/app/my-nav/my-nav.component.html (945 bytes)
CREATE src/app/my-nav/my-nav.component.spec.ts (605 bytes)
CREATE src/app/my-nav/my-nav.component.ts (481 bytes)
UPDATE src/app/app.module.ts (795 bytes)

要使其对用户可见，请删除文件app.component.html的默认内容，然后插入以下元素：

 <my-nav></my-nav>

Please follow this blog