Angular8：为什么我没有在这些 Angular Material 卡片之间留出空间？

Question

我正在学习 Angular 8，现在必须问我做错了什么，因为这些卡片之间应该有空间，下图显示了一条红线，应该有一些空间。

这是我的组件 html

<mat-card class="mat-space-bottom">
  <mat-card-header><mat-card-title>Book Search Api</mat-card-title></mat-card-header>
  <form [formGroup]="newContact" class="form-container">

    <mat-form-field>
      <input type="text" matInput placeholder="Title"  formControlName="title" #box (keyup.enter)="getTitle(box.value)"> <p>{{value}}</p>
    </mat-form-field>

    <mat-form-field>
      <input type="text" matInput placeholder="Author" formControlName="author" #box (keyup.enter)="getAutor(box.value)"> <p>{{value}}</p>
    </mat-form-field>

    <mat-form-field>
      <input type="text" matInput placeholder="Genre" formControlName="genre" #box (keyup.enter)="getGenre(box.value)"> <p>{{value}}</p>
    </mat-form-field>

    <mat-form-field>
      <input type="text" matInput placeholder="Price" formControlName="price" #box (keyup.enter)="getPrice(box.value)"> <p>{{value}}</p>
    </mat-form-field>

  </form>

</mat-card>


<mat-card class="mat-space-bottom" *ngFor="let phone of bookItems">

  <mat-card-header >
    <!-- <div mat-card-avatar class="firstLetter">{{phone.title | slice:0:1 | uppercase}}</div> -->
    <mat-card-title>{{phone.title | titlecase}}</mat-card-title>
    <mat-card-subtitle>{{phone.description}}</mat-card-subtitle>
    <mat-card-subtitle>{{phone.author}}</mat-card-subtitle>
    <mat-card-subtitle>{{phone.genre}}</mat-card-subtitle>
    <mat-card-subtitle>{{phone.publish_date}}</mat-card-subtitle>
    <mat-card-subtitle>{{phone.price}}</mat-card-subtitle>

  </mat-card-header>
  <!--
  <mat-card-actions>
    <a title="Edit Contact" routerLink="/contact/{{phone.id}}">
      <i class="material-icons">edit</i>
    </a>
    <a class="delete" title="Delete Contact" (click)="delete(phone, phone.id)">
      <i class="material-icons">close</i>
    </a>
  </mat-card-actions>
  </div> -->
</mat-card>

这是我的scss：

mat-card {
  display: flex;
}

mat-card-header {
  width: 100%;
  display: flex;
  align-items: center;
}

mat-card-actions {
  margin-left: auto;
}

mat-card-subtitle {
  margin-bottom: 0;
}

mat-card:not(:last-child) {
  margin-bottom: 15px;
}

mat-card-actions {
  padding-top: 0;
}

.firstLetter {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 22px;
}

mat-card:nth-child(1n) .firstLetter {
  background: #2e6da4;
}

mat-card:nth-child(2n) .firstLetter {
  background: #4cae4c;
}

mat-card:nth-child(3n) .firstLetter {
  background: #46b8da;
}

mat-card:nth-child(4n) .firstLetter {
  background: #eea236;
}

mat-card:nth-child(5n) .firstLetter {
  background: #d43f3a;
}

.delete i {
  cursor: pointer;
  color: #d43f3a;
}

.mat-space-bottom {
  margin-bottom: 10px;
  ...
}

Answer 1

无法在 stackblitz 上复制该问题...也许您遗漏了什么；

请检查working stackblitz here

我使用了你的 HTML/CSS，下面是相关的 ts 文件：

import {Component} from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms';

@Component({
  selector: 'card-fancy-example',
  templateUrl: 'card-fancy-example.html',
  styleUrls: ['card-fancy-example.css'],
})
export class CardFancyExample {
  bookItems:any[];
  newContact = new FormGroup({
    title: new FormControl(''),
    author: new FormControl(''),
    genre: new FormControl(''),
    price: new FormControl(''),
  });

  constructor(){
    this.bookItems = [
      { title:'test title' ,description:'test descr ' ,author:'test author' ,genre:'test1 genre' ,publish_date:'test date' ,price:'test price' }
      ,{ title:'test title' ,description:'test descr ' ,author:'test author' ,genre:'test1 genre' ,publish_date:'test date' ,price:'test price' }
      ,{ title:'test title' ,description:'test descr ' ,author:'test author' ,genre:'test1 genre' ,publish_date:'test date' ,price:'test price' }
      ,{ title:'test title' ,description:'test descr ' ,author:'test author' ,genre:'test1 genre' ,publish_date:'test date' ,price:'test price' }
      ,{ title:'test title' ,description:'test descr ' ,author:'test author' ,genre:'test1 genre' ,publish_date:'test date' ,price:'test price' }
    ];
  }
}