2016-04-01 33 views
4

Angular 2 uygulamasında web hizmetinden döndürülen json nesne dizisini doğru yazılan nesne dizisine nasıl eşleyeceğimi anlayamıyorum.Angular 2 resmi örneği: güçlü bir şekilde yazılan json object array eşleme hatası

Angular 2'nin plunker'daki resmi örneğinde de görebileceğiniz gibi, beklenen nesneler Hero türünde değildir, bunlar Object nesnesidir ve kahramanlar şunlardır: Hero [HeroListComponent] [] []. Sen dizi kesinlikle yazılı olmadığını konsolda görebilirsiniz:

http://plnkr.co/edit/Qa22yzPh3JWI8lNZ99Ik?p=preview

ekstra console.log eklendi() kahraman komutunu eklemek için aradın, biz Hero yok tarayıcı konsoluna görebilirsiniz [] ancak Nesne [].

Yani görünüşte burada dönüşüm çalışmaz:

this.http.get(this._heroesUrl) 
      .map(res => <Hero[]> res.json().data) 
      .catch(this.handleError); 

ve Nesne [] yerine [] Hero olsun.

Doğru yazılan nesnelere json eşleme hakkında herhangi bir fikir?

diğer bilgiler: https://angular.io/docs/ts/latest/guide/server-communication.html

+3

dönüşüm değildir:

böyle bir çağrı sonunda kahraman [] elde etmek için kolay bir yöntem olmalıdır. Bu bir [tip iddiası] (https://github.com/Microsoft/TypeScript/blob/master/doc/spec.md#4.16). Bana göre, bu tip iddiaları yapmak kötü bir fikirdir. .json() 'dan aldığınız şey aslında bir dizi Hero örneği değildir. Burada önemli değil çünkü Hero'nun alanları var. Ama eğer yöntemleri varsa, onları çağırmak işe yaramazdı. Kahraman bir arayüz olmalı, bir sınıf değil, IMO. –

+0

Cevabınız için teşekkür ederiz! Evet, dediğin gibi işe yaramadığını ve bu konuya başladığımı gözlemlediğimi gözlemledim :) Eğer bir arayüz olmalı diyorsan .. Bunun için iyi bir örnek var mı? Model nesnelerini herkese açık yöntemlerle oluşturmanın ve onları web api'den gelen json ile doldurmanın en iyi yolu? Yani, herhangi bir otomatik haritacı yok mu? Yuvalanmış nesneler için manuel haritalama yapmak gerçekten zor. Bu basit vakayla ilgili iyi bir örnek bulamadığım bir şey bulamadım ... Web API'sından gelen json verileriyle kripto sınıfından çıkarılan nesnelerimi doldurmak için. –

+0

Veya arabirimi kendiliğinden başlatacak ve genel yöntemleri açığa çıkaracak başka bir nesnenin yapıcısına iletmeliyim, şablonlardan çağrılmam gerekiyor mu? Belki de benim yaklaşımım yanlış burada ... Teşekkürler! –

cevap

3

Tarayıcınız JavaScript, muhtemelen ES5 değil typescript çalışıyor. TypeScript'te diziye bir tip tanımı verilebilir, ancak JavaScript'te bir dizi bir dizi nesnedir. Orada bir şey koyabilirsiniz ve yazılmamış.

ES6'da typed arrays vardır, ancak bunlar aslında diziler değil, ikili verileri işlemek için nesnelerdir.

TypeScript gösterimi (type assertion), yalnızca derleyici dizisinin, yalnızca Hero nesnesi veya uyumlu olanlar içerdiği gibi kullanılmadığını kontrol etmek için kullanılır. Çalışma zamanında zorlanmaz ve herhangi bir kod yaymaz. Yukarıdaki linkte yinelenen sayısında görüldüğü gibi

+0

Cevabınız için teşekkür ederiz. Eğer Hero sınıfına özel bir işlev ekledim (getNameSpecial() gibi) ve bunu şablondan çağırırsam, o Hero'nun web hizmeti sonucuyla eşleştirilmesi durumunda şu anda işe yaramaz ... (çünkü Kahraman aslında değildir. Herhangi bir yöntem, söylediğin gibi bir Nesne) Ama prototipine eklenen üye işlevleri ile bir Kahraman tiplenmiş sınıf var gibi prototip ve davranmak için doğru yöntemler eklemek için TypeScript'in görev değil mi? Yine de jsondan eşlenen nesnede Hero typescript sınıfında tanımlanan yöntemleri görmeyi bekliyorum ... Sizce ne düşünüyorsunuz? Teşekkürler!!! –

+1

@BeriBener Hayır, TypeScript böyle büyülü bir şey yapmaz. Bunu ele almak Angular'ın sorumluluğunda olur. Tip iddiası sadece içeri giren şeyin “Hero” tipi nesneler olduğu varsayılır. Bu olmayabilir ve bundan dolayı bir hata mesajı olmayacaktır. Sadece nesneler kullanıldığında ve beklendiği alanlara sahip olmadığında. –

3

Angular 2 observable doesn't 'map' to model

, json nesneleri kendi typescript sınıflarına otomatik haritalama hala elle yapılan bir işlemdir ....

Gerçekten typescript zeki olacağını düşündüm Harita() çağrısı sonunda Hero nesnesini alacağım şekilde aktarmaya yetecek kadar. .map (Res. => Res.json() verileri)