Angular8:为什么我在这些 Angular Material 卡片之间没有得到 space?
Angular8: Why don't I get space between these Angular Material cards?
我正在学习Angular 8,现在必须问我做错了什么,因为这些卡片之间应该有space,下图显示了一条红线,那里应该有一些space.
这是我的组件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;
...
}
无法在 stackblitz 上重现该问题...也许您遗漏了什么;
我用了你的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' }
];
}
}
我正在学习Angular 8,现在必须问我做错了什么,因为这些卡片之间应该有space,下图显示了一条红线,那里应该有一些space.
这是我的组件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;
...
}
无法在 stackblitz 上重现该问题...也许您遗漏了什么;
我用了你的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' }
];
}
}