[英]How to create and access array of objects in firebase manually in angular?
I have created list of multiple cards from array of objects stored in user.component.ts我从存储在 user.component.ts 中的对象数组创建了多张卡片的列表
user.component.ts用户组件.ts
import { Component, OnInit } from '@angular/core';
import { AuthService } from '../service/auth.service';
@Component({
selector: 'app-user',
templateUrl: './user.component.html',
styleUrls: ['./user.component.css']
})
export class UserComponent implements OnInit {
constructor(public auth: AuthService) { }
ngOnInit() {
}
logout(){
this.auth.logout();
}
cards = [
{
title: 'Card Title 1',
description: 'Some quick example text to build on the card title and make up the bulk of the card content',
buttonText: 'Button',
img: 'https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(34).jpg'
},
{
title: 'Card Title 2',
description: 'Some quick example text to build on the card title and make up the bulk of the card content',
buttonText: 'Button',
img: 'https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(34).jpg'
},
{
title: 'Card Title 3',
description: 'Some quick example text to build on the card title and make up the bulk of the card content',
buttonText: 'Button',
img: 'https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(34).jpg'
},
{
title: 'Card Title 4',
description: 'Some quick example text to build on the card title and make up the bulk of the card content',
buttonText: 'Button',
img: 'https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(34).jpg'
},
{
title: 'Card Title 5',
description: 'Some quick example text to build on the card title and make up the bulk of the card content',
buttonText: 'Button',
img: 'https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(34).jpg'
},
{
title: 'Card Title 6',
description: 'Some quick example text to build on the card title and make up the bulk of the card content',
buttonText: 'Button',
img: 'https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(34).jpg'
},
{
title: 'Card Title 7',
description: 'Some quick example text to build on the card title and make up the bulk of the card content',
buttonText: 'Button',
img: 'https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(34).jpg'
},
{
title: 'Card Title 8',
description: 'Some quick example text to build on the card title and make up the bulk of the card content',
buttonText: 'Button',
img: 'https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(34).jpg'
},
];
}
Now how can i create a similar array of object in firebase database and retrieve it for list of cards creation in user.component.html现在我如何在 firebase 数据库中创建一个类似的对象数组并检索它以在 user.component.html 中创建卡片列表
user.component.html用户组件.html
<select #myInput>
<option selected></option>
<option>Card Title 1</option>
</select>
</span>
<div class="container" >
<div class="row">
<div class="col-md-3 mx-auto my-5" *ngFor="let card of cards | filterBy: 'title': myInput.value ">
<mdb-card>
<mdb-card-img [src]="card.img" alt="Card image cap">
</mdb-card-img>
<mdb-card-body>
<mdb-card-title>
<h4>{{card.title}}</h4>
</mdb-card-title>
<mdb-card-text>
{{card.description}}
</mdb-card-text>
<button mdbBtn color="primary">{{card.buttonText}}</button>
</mdb-card-body>
</mdb-card>
</div>
</div>
</div>
when data in the array is changed it should reflect in the list of cards.What to do?当数组中的数据改变时,它应该反映在卡片列表中。怎么办?
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.