Angular *不在有角度的地方工作

尝试使用Angular从firebase检索数据。 我有一些存储在Firebase中的数据，我想显示存储在第三个子系统中的数据。 下面是我的firebase的外观。

我的组件代码是

this.id = this.route.snapshot.paramMap.get('id');
if(this.id) {this.scheduleService.get(this.id).take(1).subscribe(p =>    this.date =p);}

我的服务代码如下

getDates(){
    return this.db.list('date').snapshotChanges().map(action => {
      return action.map(
        item => {
          const $key = item.payload.key;
          const data = { $key, ...item.payload.val() };
          return data;
      });
    });
  }

下面是显示数据的HTML代码

<ul *ngFor="let item of date.artist1.avlTime">
  <li>
  {{item?.fromtimeAm}}
  </li>
</ul>

<ul *ngFor="let item of availableTime">
                  <li>
                    {{item.fromtimeHr}}{{item.fromtimeMn}} {{item.fromtimeAm}}
                  </li>
                </ul>

{{item？.fromtimeAm}}

我不确定我做错了什么。

---

尝试了不同的html类型来获取第三/第四个子数据，但没有任何效果。

有时angular无法将数组/列表识别为可以在ngFor中循环的内容。尝试调用yout.ts文件中的函数，该函数返回如下列表：

<ul *ngFor="let item of getAvlTime()">
  <li>
  {{item?.fromtimeAm}}
  </li>
</ul>

谢谢大家的支持。 我解决了这个问题。 我在服务中创建了新功能

getAvlDate(id){
    return this.db.list('date/'+id+'/artist1/avlTime').snapshotChanges().map(action => {
      return action.map(
        item => {
          const $key = item.payload.key;
          const data = { $key, ...item.payload.val() };
          return data;
      });
    });
  }

然后将此代码添加到组件TS文件中

this.scheduleService.getAvlDate(this.id).take(1).subscribe(p=>this.availableTime =p);

然后在HTML中，以下代码用于检索数据

<ul *ngFor="let item of date.artist1.avlTime">
  <li>
  {{item?.fromtimeAm}}
  </li>
</ul>

<ul *ngFor="let item of availableTime">
                  <li>
                    {{item.fromtimeHr}}{{item.fromtimeMn}} {{item.fromtimeAm}}
                  </li>
                </ul>

{{item.fromtimeHr}}{{item.fromtimeMn}}{{item.fromtimeAm}}

我不熟悉firebase，但在访问元素之前，您肯定要在

avlTime

之后经历另一层（该字符串以

-La

开头，不确定这是数组还是对象）。看起来fromtimeAm不在avlTime上，而是在第一个子元素上。如果您将

{{item | json}}

放在模板中，您就可以看到数据的样子。如果你在数据存储中创建了与你的数据相匹配的接口，你会帮上大忙的。alv time看起来不像阵列你一直说它不工作，但你没有解释这意味着什么。您收到了哪些错误？或者你看到一个空白屏幕？对于任何[]，它对解决问题没有任何作用，但会降低代码质量，对于使用

getX（）{}

over

getX（）{}

，我没有发布解决方案并不重要，因为你发布了如此糟糕的建议而不是解决方案。我的意思是，对于这样的代码，您应该使用带有get访问器的属性，即如果一个方法带有前缀。这是什么Java？那将是浪费时间，您不需要添加属性。他只是有一个组件不能识别列表。只需在组件的typescript文件中调用一个函数来返回一个数组，就可以解决这个问题。使用as any[]会强制它被识别为一个数组并修复它为什么你会否决一个有效的答案？如果你认为这不是最好的解决方案，那么发布另一个同样有效的解决方案，用户会勾选他们最喜欢的解决方案，这太荒谬了。他没有说有什么，那你为什么认为这是一个编译错误呢？即使是这样，应用程序也在运行，因为这些错误只是typescript中的警告。关于使用属性，它怎么会比编写getX方法更不必要呢？我的观点是你的风格很差。因为你甚至不知道问题是什么，所以你没有解决问题，这一点仍然没有改变。