Question

如果这是一个基本答案的基本问题，我道歉。我特别擅长Angular2和一般的开发，而且我被卡住了。

我有一个从Firebase中提取列表的服务：

listItems: FirebaseListObservable<any[]>;
constructor(public af: AngularFire) {
    this.listItems = af.database.list('items');
}
getFood() {
    return this.listItems;
}

我的组件：

list: Observable<any[]>;
delBtnActive: boolean = false;
constructor(private dataService: DataSService) {
    this.list = dataService.getFood();
}

ngOnInit(): void {
    this.lookForDel();
}

lookForDel() {
    var found = false;
    this.list.forEach(items => {
        items.forEach(item => {
            if (item.del) {found = true};
        })
    });
    this.delBtnActive = found;
}

最后我的模板，它使用delBtnActive布尔值：

<button *ngIf="delBtnActive">Confirm Delete</button>

一切都在这里工作，除了首次初始化此路线时，按钮不会出现在屏幕上，而应该在那里。从此路线切换到另一个路线，然后返回导致按钮正确显示。对Firebase上的数据进行任何更新都会导致按钮正确显示。

编辑：请注意，基于控制台日志记录，lookForDel（）方法被称为OnInit。我相信问题是ngIf是在首次初始化路由时加载数据之前发生的。

非常感谢您对此特别提示或一般提示的帮助！

Answer 1

不是使用forEach侦听发出的值，而是可以组成一个发出布尔值的observable - 指示您的按钮是否应该处于活动状态 - 每次从Firebase可观察项发出一个列表时：

delBtnActive: Observable<boolean>;

lookForDel() {
    this.delBtnActive = this.listItems.map((items) => Boolean(items.find(item => item.del));
}

在您的模板中，您将使用async管道：

<button *ngIf="delBtnActive | async">Confirm Delete</button>

至于为什么你当前的实现有时会有效，有时却没有，我能看到的唯一解释是有时forEach同步发生，有时却不发生。（使用RxJS，这种事情实际上可能发生。）

* ng与firebase同步问题

1 个答案: