Nativescript + Angular2：RadListView 绑定答案

【问题标题】：Nativescript + Angular2: RadListView bindingNativescript + Angular2：RadListView 绑定
【发布时间】：2017-03-05 04:56:17
【问题描述】：

我正在尝试将 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'});
    }
}

服务正在正确更新模型，但视图未反映更改，这让我相信问题出在 observable 绑定中。

任何帮助将不胜感激！

注意检查了相关问题，但没有任何解决方案有帮助，即Nativescript RadListView not binding to source property 解决方案导致构建错误。

【问题讨论】：

此绑定 text="{{value}}" 仅适用于 XML，表示没有 Angular 的 NativeScript。使用 {N} + Angular 时，您需要使用 Angular 的出价语法 [text]="value"
@VladimirAmiorkov 感谢您的回复和帮助！我已经修改了代码以考虑到 Angular 绑定（我假设 Angular2 的插值之前以某种方式被使用过）但无济于事； UI 仍然没有反映这些变化。我在 Github 上比较了你的示例代码，但看不出有什么不同。

标签： nativescript angular2-nativescript nativescript-telerik-ui

【解决方案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>

提示：似乎不需要 stringwrapper。如果它只是一个字符串数组，你可以使用下面的代码

 <Label class="titleLabel" [text]="item" textWrap="true" width="100%"></Label>

【讨论】：

您好，感谢您的回复。不幸的是，这似乎没有任何区别，因为 UI 仍然无法更新。关于 StringWrapper 类，仅供演示。