Json 角度射击：从文档中的地图中获取关键点和值，作为可观察对象

这是我的firestore文档。我想得到一个可观察的评论列表，订阅该列表并遍历评论。如何使用有角度的火力？ 我是这里的初学者，如果你能详细解释，我将非常感谢你

---

谢谢大家!

您可以做的是为文档创建一个可观察对象，当发生更改时，该文档将发出文档数据。 然后订阅此observable以获取数据并在html中显示所需的数据。 下面是一个可以改进的快速示例

app.component.ts

import {Component} from '@angular/core';
import {AngularFirestore} from '@angular/fire/firestore';
import {Observable} from 'rxjs';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  doc$: Observable<any>;
  collection = 'Agriculture_and_cropes';
  docId = 'Replace by your document Id';

  constructor(db: AngularFirestore) {
    this.doc$ = db.collection(this.collection).doc(this.docId).valueChanges();
  }

}

从'@angular/core'导入{Component}；
从'@angular/fire/firestore'导入{AngularFirestore}；
从“rxjs”导入{Observable}；
@组成部分({
选择器：'应用程序根'，
templateUrl:“./app.component.html”，
样式URL:['./app.component.css']
})
导出类AppComponent{
doc$：可观察的；
收集=‘农业和作物’；
docId='替换为您的文档Id'；
建造商（db:AngularFirestore）{
this.doc$=db.collection（this.collection）.doc（this.docId）.valueChanges（）；
}
}

app.component.html

<ul *ngIf="doc$ | async as doc">
  <li *ngFor="let comment of doc.comments">
    {{comment.name}} : {{comment.desc}}
  </li>
</ul>

{{comment.name}}:{{comment.desc}

您所能做的是为文档创建一个可观察的对象，当文档发生更改时，该对象将发出文档数据。 然后订阅此observable以获取数据并在html中显示所需的数据。 下面是一个可以改进的快速示例

app.component.ts

import {Component} from '@angular/core';
import {AngularFirestore} from '@angular/fire/firestore';
import {Observable} from 'rxjs';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  doc$: Observable<any>;
  collection = 'Agriculture_and_cropes';
  docId = 'Replace by your document Id';

  constructor(db: AngularFirestore) {
    this.doc$ = db.collection(this.collection).doc(this.docId).valueChanges();
  }

}

从'@angular/core'导入{Component}；
从'@angular/fire/firestore'导入{AngularFirestore}；
从“rxjs”导入{Observable}；
@组成部分({
选择器：'应用程序根'，
templateUrl:“./app.component.html”，
样式URL:['./app.component.css']
})
导出类AppComponent{
doc$：可观察的；
收集=‘农业和作物’；
docId='替换为您的文档Id'；
建造商（db:AngularFirestore）{
this.doc$=db.collection（this.collection）.doc（this.docId）.valueChanges（）；
}
}

app.component.html

<ul *ngIf="doc$ | async as doc">
  <li *ngFor="let comment of doc.comments">
    {{comment.name}} : {{comment.desc}}
  </li>
</ul>

{{comment.name}}:{{comment.desc}

在component.ts文件上

doc: issue;
doc_comments: Array<string>;
ngOnInit() {
    db.collection('Agriculture_and_cropes').doc<issue>('doc_Id').valueChanges().subscribe(data => {
        this.doc = data;
        this.doc_comments = Array.from( data.comments.keys() );
    });
}

单据：出库；
文档注释：数组；
恩戈尼尼特（）{
db.collection（'Agriculture_and_cropes'）.doc（'doc_Id'）.valueChanges（）.subscribe（数据=>{
this.doc=数据；
this.doc_comments=Array.from（data.comments.keys（））；
});
}

在您的组件上。html

<ul *ngIf="doc_comments">
    <li *ngFor="let c of doc_comments">
        {{c}} : {{doc.comments[c]}}
    </li>
</ul>

{{c}}:{{doc.comments[c]}

在component.ts文件上

doc: issue;
doc_comments: Array<string>;
ngOnInit() {
    db.collection('Agriculture_and_cropes').doc<issue>('doc_Id').valueChanges().subscribe(data => {
        this.doc = data;
        this.doc_comments = Array.from( data.comments.keys() );
    });
}

单据：出库；
文档注释：数组；
恩戈尼尼特（）{
db.collection（'Agriculture_and_cropes'）.doc（'doc_Id'）.valueChanges（）.subscribe（数据=>{
this.doc=数据；
this.doc_comments=Array.from（data.comments.keys（））；
});
}

在您的组件上。html

<ul *ngIf="doc_comments">
    <li *ngFor="let c of doc_comments">
        {{c}} : {{doc.comments[c]}}
    </li>
</ul>

{{c}}:{{doc.comments[c]}

它对我有用。问题是什么？你安装了吗？它对我有用。问题是什么？你安装了吗？