Nativescript + Angular2：RadListView綁定

我試圖將一個Observable綁定到RadListView，而不使用任何Page屬性，但似乎在做某件事情完全錯誤。以下是代碼的縮小版本。Nativescript + Angular2：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 not binding to source property解決方案導致構建錯誤。

來源

2017-03-05 SeanTheStudent

此綁定'text =「{{value}}」'僅用於XML，表示沒有Angular的NativeScript。當使用{N} + Angular時，您需要使用Angular的綁定語法，它是'[text] =「value」' –

@VladimirAmiorkov感謝您的回覆和幫助！我修改了代碼來考慮Angular綁定（我假定Angular2的插值之前被用過）但無濟於事;用戶界面仍然不能反映這些變化。我在Github上比較了您的示例代碼，但無法真正看到任何差異。 – SeanTheStudent

更改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>

來源

2017-03-05 12:38:22 Habeeb

嗨，謝謝你的回覆。不幸的是，這似乎沒有任何區別，因爲UI仍然無法更新。關於StringWrapper類，它僅用於演示目的。 – SeanTheStudent

Nativescript + Angular2：RadListView綁定

回答

相關問題