Angular2 привязывает наблюдаемую функцию вместо свойства

Question

Я запутался в чем-то, что, я полагаю, имеет основополагающее значение для реактивного программирования, поэтому я ищу некоторые разъяснения.

Почему пример # 1 работает, но пример # 2 терпит неудачу?

Пример # 1:

Компонент

export class AppComponent { 
    weeklyCount: Observable<number>[]; 

    constructor(private service: MyService) { 
    this.weeklyCount = [service.getCountByDay("12/18/2016"),service.getCountByDay("12/28/2016")]; 
    } 

Шаблон

<ul> 
    <li class="text" *ngFor="let count of weeklyCount "> 
    {{ count | async }} 
    </li> 
</ul> 

Пример # 2

Компонент

export class AppComponent { 

    constructor(private service: MyService) { 
    } 

    thisWeeksCount(): Observable<number>[] { 
    var a = this.service.getCountByDay("12/18/2016"); 
    var b = this.service.getCountByDay("12/28/2016"); 
    return [a,b]; 
    } 

Шаблон

<ul> 
    <li class="text" *ngFor="let count of thisWeeksCount()"> 
    {{ count | async }} 
    </li> 
</ul> 

Я использую AngularFire2 под крышкой службы, но служба возвращается rxjs наблюдаемые.

Редактировать: «fail horribly» = страница не возвращает результаты, становится невосприимчивой до тех пор, пока не будет убита, а память будет расти. Это имеет смысл на основе принятого ответа.

Answer 1

Я не знаю, что вы подразумеваете под «глючить ужасно», но эти два не то же самое:

1. Создает массив с двумя наблюдаемыми характеристиками, которые позже итерировать в шаблоне.

2. Создает новый массив с Observables каждый раз, когда обнаружение изменений должно проверять, было ли это выражение изменено. Это значит, что метод thisWeeksCount() будет называться чрезвычайно часто, создавая множество Observables и, вероятно, много запросов в вашу базу данных AngularFire2.

Таким образом, вы, вероятно, захотите использовать первый вариант.