Angular 有棱角的。如何有条件地显示标题？

我有一个按公寓编号排序的公寓对象的可观察数组（从firebase查询返回）：

[
  {number: 10, color: white, ...},
  {number: 11, color: blue, ....},
  {number: 20, color: red, ...}
  {number: 32, color: red, ...}
]

每个公寓都有一个号码

公寓号码的第一位数字决定了他的flor

例如：

Apartment number: 32 = 3th floor
Apartment number: 53 = 5th floor

每次楼层更改时，我都需要显示带有楼层编号的标题。有些人喜欢这样：

1th Floor:
 - 10
 - 11
 - 12
 ...
2th Floor:
 - 20
 - 21
 ...
3th Floor:
 - 30
 - 31
....

如何使用ngFor和异步管道实现这一点

要简单地显示所有公寓的列表，我使用下面的代码：

<div *ngFor="let apartment of apartment$ | async">
<h2>{{apartment.number}}</h2>
</div>

{{公寓号码}

如果您只想使用一些模板逻辑（并使用

async

）执行此操作，您可以利用*ngFor的index属性：

<div *ngFor="let apartment of apartments | async; let i = index">
    <h1 *ngIf="i === 0 || (apartment.number / 10 >> 0) !== (apartments[i-1].number / 10 >> 0)">{{(apartment.number / 10 >> 0)}}th Floor {{apartment.number}}</h1>
    <h2>{{apartment.number}}</h2>
</div>

{{（公寓号/10>>0）}四楼{{{公寓号}
{{公寓号码}

其中

（plant.number/10>>0）

应给出

数字

除以10，不带余数…

以下是工作示例

ts代码：

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  floor: any[] = [];
  apartments: Array<any> = [
    { number: 10, color: "white" },
    { number: 11, color: "blue" },
    { number: 20, color: "red" },
    { number: 32, color: "red" },
    { number: 33, color: "red" },
    { number: 34, color: "red" }
  ];



  constructor() {
    for (let i = 0; i < this.apartments.length; i++) {
      this.calculateFloor(this.apartments[i]);
    }
  }
 calculateFloor(apartment){
     if (Math.floor(apartment.number / 10) > 0) {
      if (this.floor.indexOf(Math.floor(apartment.number / 10)) == -1) {
        this.floor.push(Math.floor(apartment.number / 10));
      }
      return { num: apartment.number, status: true, floor: Math.floor(apartment.number / 10) };
    }

  }

  calculateApartment(apartment, floor){
    if (Math.floor(apartment.number / 10) == floor) {
      return true
    } else {
      return false
    }
  }
}

从'@angular/core'导入{Component}；
@组成部分({
选择器：“我的应用程序”，
templateUrl:“./app.component.html”，
样式URL:['./app.component.css']
})
导出类AppComponent{
楼层：任何[]=[]；
公寓：阵列=[
{编号：10，颜色：“白色”}，
{编号：11，颜色：“蓝色”}，
{编号：20，颜色：“红色”}，
{编号：32，颜色：“红色”}，
{编号：33，颜色：“红色”}，
{编号：34，颜色：“红色”}
];
构造函数（）{
for（设i=0；i0）{
if（this.floor.indexOf（Math.floor（partment.number/10））=-1）{
这个。楼层。推（数学。楼层（公寓号/10））；
}
返回{num:partment.number，状态：true，楼层：Math.floor（partment.number/10）}；
}
}
计算部门（公寓、楼层）{
if（数学楼层（公寓编号/10）=楼层）{
返回真值
}否则{
返回错误
}
}
}

HTML:

{{f}}第三层


{{calculateApartment（公寓，f）？公寓。编号：''}}

如果您想计算您可以建造的楼层

//Add to each this.apartments element a property:floor
this.apartments=this.apartments.map(ap=>
  {
    return {...ap,floor:Math.floor(ap.number/10)}
  })

//Create an array with unique values of "floor"
//And add the property "apartments" 
const floor=this.apartments.filter((item, pos)=> {
    return this.apartments.findIndex(i=>item.floor==i.floor) == pos;
}).map(f=>{
  return{
    floor:f.floor,
    apartments:this.apartments.filter(a=>a.floor==f.floor)
  }

}

---

这是我第一次尝试，一个简单而优雅的解决问题的方法，但是。。。当我们使用异步管道时，

单元[i-1]

会导致错误<代码>类型错误：未定义不是对象（正在评估“\u co.plants[\u v.context.index].number”）谢谢。这就是我想要的解决方案，简单有效。只是做了一些小的调整，并将其组合成一个单独的可观察对象。

//Add to each this.apartments element a property:floor
this.apartments=this.apartments.map(ap=>
  {
    return {...ap,floor:Math.floor(ap.number/10)}
  })

//Create an array with unique values of "floor"
//And add the property "apartments" 
const floor=this.apartments.filter((item, pos)=> {
    return this.apartments.findIndex(i=>item.floor==i.floor) == pos;
}).map(f=>{
  return{
    floor:f.floor,
    apartments:this.apartments.filter(a=>a.floor==f.floor)
  }

}