从Angular中的“Firebase实时数据库”获取多次嵌套的数据答案

【问题标题】：Get data which is multiple times nested from "Firebase Realtime Database" in Angular从Angular中的“Firebase实时数据库”获取多次嵌套的数据
【发布时间】：2021-01-28 16:14:59
【问题描述】：

我正在使用 Angular 9 和 Firebase 实时数据库

目前我能够从数据库中获取数据，但我的问题是，我需要的数据嵌套了多次，我不知道如何只显示嵌套最多（两次）的值我的 HTML 上的数据。

打字稿：

import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs';
import { AngularFireDatabase } from '@angular/fire/database';

@Component({
  selector: 'app-os-skills',
  templateUrl: './os-skills.component.html',
  styleUrls: ['./os-skills.component.css']
})
export class OsSkillsComponent implements OnInit {

  osSkills: Observable<any> = null;

  constructor(private db : AngularFireDatabase) { 
    this.osSkills = db.list("/os_programm").snapshotChanges() 
  }

  ngOnInit(): void {
  }

}

HTML：

<div class="main">
    <div class="card" *ngFor="let item of osSkills | async">
        <div class="head">
                <h1>{{item.payload.skill | json}}</h1> 
                <p>Level</p>
            </div>
            <div class="description" [ngSwitch]="item.payload.level | json">
                <div *ngSwitchDefault>
                    <div class="square_empty"></div>
                    <div class="square_empty"></div>
                    <div class="square_empty"></div>
                    <div class="square_empty"></div>
                    <div class="square_empty"></div>
                </div>
                <div *ngSwitchCase = 1>
                    <div class="square_filled"></div>
                    <div class="square_empty"></div>
                    <div class="square_empty"></div>
                    <div class="square_empty"></div>
                    <div class="square_empty"></div>
                </div>
                <div *ngSwitchCase = 2>
                    <div class="square_filled"></div>
                    <div class="square_filled"></div>
                    <div class="square_empty"></div>
                    <div class="square_empty"></div>
                    <div class="square_empty"></div>
                </div>
                <div *ngSwitchCase = 3>
                    <div class="square_filled"></div>
                    <div class="square_filled"></div>
                    <div class="square_filled"></div>
                    <div class="square_empty"></div>
                    <div class="square_empty"></div>
                </div>
                <div *ngSwitchCase = 4>
                    <div class="square_filled"></div>
                    <div class="square_filled"></div>
                    <div class="square_filled"></div>
                    <div class="square_filled"></div>
                    <div class="square_empty"></div>
                </div>
                <div *ngSwitchCase = 5>
                    <div class="square_filled"></div>
                    <div class="square_filled"></div>
                    <div class="square_filled"></div>
                    <div class="square_filled"></div>
                    <div class="square_filled"></div>
                </div>
            </div>
    </div>
</div>

Datastructure

【问题讨论】：

你能分享一下你的数据结构吗？
是的，肯定是HTML下的链接
好吧，你能在控制台记录 this.osSkills 吗？只是为了检查它是一个数组还是一个对象
这是一个对象，如果我改变 {{item.payload.skill | json}} 到 {{item.payload | json}} 我得到一个像这样的数组： {"level": 4,"skill": "Windows"}
感谢 stackoverflow.com/users/6518546/elmehdi">@Elmehdi</a> 的帮助，但我在这个网站上找到了我的问题的答案：grokonez.com/frontend/angular/angular-8/…

标签： json angular firebase firebase-realtime-database multidimensional-array

【解决方案1】：

如果你想获得技能，你可以做到：

<h1>{{item.payload.skill}}</h1>

对于关卡：

<p>{{item.payload.level}}</p>

【讨论】：

我之前已经尝试过，但不幸的是这对我不起作用。
您对
{{item.payload.skill}}
有什么好处
我什么都没有
我似乎无法理解您的问题。所以你有 osSkills 并且你想从中提取所有的技能？你能做{{osSkills |异步 | json }} 并将其附加到您的问题中。