Question

我有一个包含以下类的Angular 2项目。

Bike.list.service.ts类

import {Component} from '@angular/core';
import {Injectable} from '@angular/core';
import {Http, HttpModule,Response} from '@angular/http';
import {Bike} from './bike.model';
import 'rxjs/Rx';
import {Observable}     from 'rxjs/Observable';

@Injectable()
export class BikeService {
  private _Url = 'https://feeds.bikesharetoronto.com/stations/stations.json';

  constructor(private _http:Http) { }

  getStations(): Observable<Bike[]> {
    return this._http.get(this._Url)
      .map(this.extractData)
      .catch(this.handleError);
  }

  private extractData(res: Response) {
    let body = res.json();
    console.log(body);
    return body.stationBeanList || { };
  }

  private handleError (error: any) {
    let errMsg = (error.message) ? error.message :
      error.status ? `${error.status} - ${error.statusText}` : 'Server error';
    return Observable.throw(errMsg);
  }
}

Bike.component.ts

import {Component, OnInit} from '@angular/core';
import {Bike} from './bike.model';
import {BikeService} from './bike.list.service';

@Component( {
  selector:'bike-stations',
  templateUrl:'../app/bike/bike-list.view.html',
  providers:[BikeService]
})

export class BikeComponent implements OnInit {

  stations:Bike[];
  errorMessage:any;
  mode = 'Observable';

  constructor(private _bikeListService: BikeService) {
    this.stations=[];
  }

  ngOnInit() {
    this.getStations();
  }

  getStations() {
    this._bikeListService.getStations().subscribe(
      (stations: any) => this.stations = stations,
      (error: any) => this.errorMessage = error
    );
  }
}

Bike.model.ts

export class  Bike{

  private id:number;
  private stationName:string;
  private availableDocks:number;
  private totalDocks:number;
  private latitude:number;
  private longitude:number;
  private statusValue:number;
  private statusKey:number;
  private status:string;
  private availableBikes:number;
  private stAddress1:string;
  private stAddress2:string;
  private city:string;
  private postalCode:string;
  private location:string;
  private altitude:string;
  private testStation:boolean;
  private lastCommunicationTime:Date;
  private is_renting:boolean;
  private landMark:string;

  constructor(bike_info: Array<any>){

  this.id=bike_info['id'];
    this.stationName=bike_info['stationName'];
    this.availableDocks=bike_info['availableDocks'];
    this.totalDocks=bike_info['totalDocks'];
    this.latitude=bike_info['latitude'];
    this.longitude=bike_info['longitude'];
    this.statusValue=bike_info['statusValue'];
    this.statusKey=bike_info['statusKey'];
    this.status=bike_info['status'];
    this.availableBikes=bike_info['availableBikes'];
    this.stAddress1=bike_info['stAddress1'];
    this.stAddress2=bike_info['stAddress2'];
    this.city=bike_info['city'];
    this.postalCode=bike_info['postalCode'];
    this.location=bike_info['location'];
    this.altitude=bike_info['altitude'];
    this.testStation=bike_info['testStation'];
    this.lastCommunicationTime=bike_info['lastCommunicationTime'];
    this.is_renting=bike_info['is_renting'];
    this.landMark=bike_info['landMark'];
  }
}

自行车list.html

<div>
  <h1>Stations List...</h1>

  <div *ngFor="let station of stations">
    <td>
      <div>Id: {{station.id}}</div>
      <div>Station Name: {{station.stationName}}</div>
      <div>availableDocks: {{station.availableDocks}} </div>
      <div>totalDocks: {{station.totalDocks}} </div>
      <div>latitude: {{station.latitude}} </div>
      <div>longitude: {{station.longitude}} </div>
      <div>statusValue: {{station.statusValue}} </div>
      <div>statusKey: {{station.statusKey}} </div>
      <div>status: {{station.status}} </div>
      <div>availableBikes: {{station.availableBikes}} </div>
      <div>stAddress1: {{station.stAddress1}} </div>
      <div>stAddress2: {{station.stAddress2}} </div>
      <div>city: {{station.city}} </div>
      <div>postalCode: {{station.postalCode}} </div>
      <div>location: {{station.location}} </div>
      <div>altitude: {{station.altitude}} </div>
      <div>testStation: {{station.testStation}} </div>
      <div>lastCommunicationTime: {{station.lastCommunicationTime}} </div>
      <div>is_renting: {{station.is_renting}} </div>
      <div>landMark: {{station.landMark}} </div>
    </td>
    <br><br><br>
  </div>
</div>

我的问题是 - 当observable返回数据时，它被分配给Bike []类，并且在Bikecomponent类中声明的＆＃39;（＆type;类型为Bike []）获取所有的JSON数据Hero类的数据成员。

但是，如果我从Bike类中删除一些数据成员，它不会影响＆＃39;（类型为Bike []）数组，它仍会打印HTML中指定的所有属性。

那么在Bike模型类中声明那些大量数据成员的需求是什么？谁能给我解释一下？

Answer 1

在这个特殊的场景中，typescript中的类允许你输入你的json，这可以带来一些好处，一个是你可以在编码时看到你的属性的类型，这可以帮你避免错误，也澄清一点咬了代码。正如你在运行时发现的那样，打字稿并不关心json的结构，所以无论你有什么类型，它都会分配任何数据，这是预期的行为，因为最后打字稿是运行时的javascript。

但是当您编码或转换时会产生一些打字稿的好处，因此我建议您看看这些步骤带来的好处。

如果您认为这些好处不足以迫使您对打字稿进行编码，那么您可以尝试使用es6。

typescript类的各种数据成员的确切需求是什么

1 个答案: