Nativescript + Angular2: привязка RadListView

Я пытаюсь привязать Observable к RadListView без использования каких-либо свойств страницы, но, похоже, что-то делаю совершенно неправильно. Ниже представлена ​​уменьшенная версия кода.

Компонент:

export class WeatherComponent implements OnInit {
    public weather : ObservableArray<StringWrapper>;

    constructor(private _weatherService : WeatherService) {
        this.weather = new ObservableArray<StringWrapper>([]);
        this.weather.push(<StringWrapper>{value:'Sunny'});
    }

    ngOnInit(): void {
        this._weatherService.getDummyWeather().subscribe(
            item => {
                this.weather.push(item);
            }
        );
    }
}

XML:

<RadListView [items]="weather">
    <template tkListItemTemplate let-item="item">
        <StackLayout orientation="vertical">
            <Label [text]="item.value"></Label>
        </StackLayout>
    </template>
</RadListView>

Простая модель данных:

export interface StringWrapper {
    value : string;
}

Сервис:

@Injectable()
export class WeatherService {
    public getDummyWeather() : Observable<StringWrapper> {
        return Observable.of(<StringWrapper>{value:'Rainy'});
    }
}

Служба правильно обновляет модель, но представление не отражает изменений, поэтому я полагаю, что проблема находится в наблюдаемой привязке.

Любая помощь будет принята с благодарностью!

N.B. Проверены связанные вопросы, и ни одно из решений не помогло, т.е. Nativescript RadListView не привязан к исходному свойству решение вызывает ошибку сборки.


person SeanTheStudent    schedule 05.03.2017    source источник
comment
Эта привязка text="{{value}}" предназначена только для XML, что означает NativeScript без Angular. При работе с {N} + Angular вам необходимо использовать синтаксис назначения ставок Angular, который равен [text]="value"   -  person Vladimir Amiorkov    schedule 05.03.2017
comment
@VladimirAmiorkov Спасибо за ответ и помощь! Я изменил код, чтобы учесть привязки Angular (я предполагал, что интерполяция Angular2 каким-то образом использовалась раньше), но безрезультатно; пользовательский интерфейс по-прежнему не отражает изменений. Я сравнил ваш пример кода на Github, но не вижу никаких различий.   -  person SeanTheStudent    schedule 05.03.2017


Ответы (1)


Измените HTML на

 <RadListView  [items]="weather" >
        <template tkListItemTemplate let-item="item">
            <StackLayout class="itemStackLayout" >
                <Label class="titleLabel" [text]="item.value" textWrap="true" width="100%"></Label>
            </StackLayout>
        </template>
 </RadListView>

Подсказка: похоже, обертка не нужна. Вы можете использовать приведенный ниже код, если это просто массив строк

 <Label class="titleLabel" [text]="item" textWrap="true" width="100%"></Label>
person Habeeb    schedule 05.03.2017
comment
Привет, спасибо за ответ. К сожалению, это не имело никакого значения, поскольку пользовательский интерфейс по-прежнему не обновляется. Что касается класса StringWrapper, это просто для демонстрационных целей. - person SeanTheStudent; 05.03.2017