web-dev-qa-db-ja.com

ゲッターのみを持つ[object Object]のプロパティスタックを設定できません

次のプランカーで次のエラーが発生します。

ゲッターのみを持つ[object Object]のプロパティスタックを設定できません

プランカーはこちら https://plnkr.co/edit/IP1ssat2Gpu1Cra495u2?p=preview

コードは次のとおりです。

//our root app component
import {Component, NgModule, OnInit, Injectable} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'
import { HttpModule, Http } from '@angular/http';
import 'rxjs/add/operator/toPromise';

class MyModel {
  public name: string;
  public value: string;
}

@Injectable()
export class MyService {

  constructor(public http: Http) {

  }

  getData (request: MyModel):Promise<MyModel>{
    return this.http.get('https://run.plnkr.co/j2Cw0yaD5Dn7ENaR/mymodel.json')
                .toPromise()
                .then(response => {
                                return response as MyModel;
                        });
  }
}

@Component({
  selector: 'my-app',
  template: `
    <div>
      <h2>Hello {{name}}</h2>
    </div>
  `,
})
export class App implements AfterViewInit {
  name:string;

  constructor(myService : MyService) {
    this.name = 'Angular2'
  }

  ngAfterViewInit(){

    let myModelObj : MyModel = new MyModel();
    console.log(this.myService);
    this.myService.getData(myModelObj)
      .then(response => {
        console.log('GET Request success')
        console.log(response);
      });

  }
}

@NgModule({
  imports: [ BrowserModule, HttpModule ],
  declarations: [ App ],
  providers : [MyService],
  bootstrap: [ App ]
})
export class AppModule {}

更新

エラーがここにあることが理解できます

this.myService.getData(myModelObj)
          .then(response => {
            console.log('GET Request success')
            console.log(response);
          });

この4行をコメントすると、問題なく動作しています。助けてください。

myServiceAppを使用する場合は、コンストラクターのプロパティに割り当てるか、その可視性を指定する必要があります(TypeScript機能)。

_constructor(private myService : MyService) {
    this.name = 'Angular2'
}
_

つまり、this.myService.getData(myModelObj)を呼び出した場合、_this.myService_は未定義です。

更新されたデモ: https://plnkr.co/edit/OyYUDSfD0Q8dDuwEAr1l

11
martin