javascript - Angular 2 uygulamasında kullanmak için bir HTTP GET'ten özel nesneler listesi döndürme

Özel nesnelerden oluşan bir listeyi düzgün bir şekilde nasıl döndüreceğimi ve içeriğini bir HTML dosyası kullanarak nasıl yazdıracağımı anlamaya çalışıyorum.

HTTP GET metodunun nasıl göründüğü aşağıda (basitlik açısından bazı şeyleri sadece problemi göstermek için sadeleştirdim) :

[HttpGet("/atr/testing")]
public List<CustomObject> GetCustomObjects()
{
    //MasterObject.CustomObjects returns a List of CustomObjects
    return MasterObject.CustomObjects();
}

Benim TypeScript dosyam (adına home.ts dediğim) abone oluyor ve HttpGet metodunu çağırıyor - işte Home sınıfının görünümü (tüm importları ve @Component bölümünü çıkardım):

export class Home {
public selectedConfiguration: string = 'TESTVALUE';

constructor(private http: Http) {
    this.getConfigurations()
        .subscribe(res => {
            this.selectedConfiguration = res;
        });
}

getConfigurations() {
    console.log('Home:getConfigurations entered...');

    return this.http.get('atr/testing')
        .map((response) => {
            console.log(response);
            return response.json();
        });
}

}

Gördüğünüz gibi, yapıcı (constructor) 'getConfigurations' çağrısını yapıyor ve bu da HttpGet metodunu çağırıyor. Beni kafa karıştıran kısım, döndürülen yanıtı doğru bir şekilde nasıl kullanacağım? Anladığım kadarıyla yanıtlar JSON stringleri olarak dönüyor (bu yüzden Home sınıfındaki selectedConfiguration değişkenim bir List yerine string değer). HTML dosyamda {{selectedConfiguration}} ile 'selectedConfiguration' stringini yazdırmaya çalıştığımda bunu alıyorum:

[object Object],[object Object],[object Object],[object Object]

HTML'imde {{selectedConfiguration[0]}} kullanırsam sadece bir tane alıyorum: [object Object]

GET yöntemiyle döndürülen Listenin içinde 4 CustomObject olması bekleniyor ve görünüşe göre JSON yanıtında en azından bu var. Her CustomObject'in 'Name', 'Date', 'Time' gibi değişkenleri var. Veriyi HTML içinde {{selectedConfiguration[0].Name}} kullanarak yazdırmayı denedim ama hiçbir şey yazdırmıyor. Her bir nesnenin bilgilerini göstermek için buradan ne yapmam gerektiğinden (ya da yanlış bir şey yapıp yapmadığımdan) tam olarak emin değilim.

Cevap #1

Kısa cevap

Örneğinizde, bir JSON nesnesini stringe dönüştürmeye çalışıyorsunuz. Bunun çalışmasını sağlamak için muhtemelen şunu yapmanız gerekecek:

this.selectedConfiguration = JSON.stringify(res);

Uzun cevap

Diyelim ki CustomObject sınıfınız şöyle bir şey görünüyor:

public class CustomObject
{
    public string Name { get; set; }
    public DateTime Date { get; set; }
}

Angular kodunuzda, bunu taklit eden bir arayüz oluşturun. Geliştirici araçlarında, harflerin büyük/küçüklüğünün eşleştiğini doğrulayın ("Name" ve "name" değil):

export interface ICustomObject {
    Name: string;
    Date: Date;
}

TypeScript'in tür kontrolünü kullanın ve döndürülen listenizi aslında CustomObjects dizisi olarak okuyun:

export class Home implements OnInit {
  public configurations: ICustomObject[];
  public selectedConfiguration: ICustomObject;

  constructor(private http: Http) {
    // move initialization code to ngOnInit. Don't forget the import and implements
  }

  ngOnInit() {
    this.getConfigurations()
        .subscribe((customList: ICustomObject[]) => {
            this.configurations = customList;
            // todo: determine the selected configuration
            this.selectedConfiguration = this.configurations[0];
        });
  }

  getConfigurations(): ICustomObject[] {
    return this.http.get('atr/testing')
        .map((response: Response) => {
            return <ICustomObject[]>response.json();
        });
}

Cevap #2

Bunu json sonucu olarak döndür:

[HttpGet("/atr/testing")]
public JsonResult GetCustomObjects()
{
    //MasterObject.CustomObjects returns a List of CustomObjects
    return Json(MasterObject.CustomObjects());
}

İlgili makaleler