嵌套的长度 list/array anfularfire 2

Question

我的 firebase 项目 中有以下设置：

- Clients
  - Client 1
     - Name
     - Services
         - Service 1
         - Service 2
  - Client 2
     - Name
     - Services
         - Service 1
         - Service 2
         - Service 3

最重要的是，我有一个服务可以为我的组件提供客户端，这是我的组件，它实现了该服务：

@Component({
  selector: 'app-client-list',
  templateUrl: './client-list.component.html',
  styleUrls: ['../../dashboard.component.css'],
  providers: [clientService]
})
export class ClientListComponent implements OnInit {
  clients: Client[];
  dataAvailable: boolean;
  constructor(private clientService: clientService) {
    this.dataAvailable = false;
    this.clientService = clientService;
  }
  ngOnInit() {
    this.clientService.getClients().subscribe(res => {
      this.clients = res;
      this.dataAvailable = true;
    });
  }
  updateSearch(a: string) {
    this.cientService.getClient(a);
  }
}

这就是我在 HTML 中展示的方式（或者我应该展示的方式）：

    <div *ngIf="dataAvailable">
<div id="row" *ngFor="let item of homies">
    <span>{{item.name}}</span>
    <span>{{item.upcomingServices.length}}</span>
</div>
</div>

现在 {{item.upcomingServices.length}} 什么也没显示，它只是留下一个空白 space，我已经尝试了这两种变体，但似乎没有任何效果：

第一个给出这个错误：

Cannot read property 'length'  of null

第二个给出这个：

InvalidPipeArgument: '[object Object]' for pipe 'AsyncPipe'

这是我用来检索客户端的服务：

@Injectable()
export class ClientService {
  homies: FirebaseListObservable<Client[]>;
  subject: BehaviorSubject<any>;
  constructor(db: AngularFireDatabase) {
    this.subject = new BehaviorSubject('');
    this.clients = db.list('/clients', {
      query: {
        orderByChild: 'name',
        startAt: this.subject
      }
    });
  }
  getClients() {
    this.subject.next('');
    return this.clients;
  }
  getClient(id: number | string) {
    this.subject.next(id);
    return this.clients;
  }
}

关于如何获取 HTML 中嵌套数组的长度的任何想法，在本例中为显示客户端时的服务长度。

Answer 1

您应该订阅该功能并在显示如下模板之前添加条件。像下面这样声明一个布尔变量

dataAvailable:boolean=false;

并像这样修改 ngOnInit 方法

 this.clientService.getClients().subscribe(res=>{
this.clients=res;//res.json() if it is not json already
this.dataAvailable=true;
});

并像下面这样修改您的模板

 <div *ngIf="dataAvailable">
    <div id="row" *ngFor="let item of clients " >
            <span>{{item.name}}</span>
            <span>{{item.upcomingServices.length}}</span> 
    </div>
    </div>

嵌套的长度 list/array anfularfire 2

Length of nested list/array anfularfire 2

html

angularfire2

angular