0

Angular2 で小さな例を作成しようとしていました。私がやっていることは、ボタンをクリックすると、パブリック API にアクセスして引用符が表示されますが、値が表示されず、エラーが発生することです。

[{{quote.contents.quotes.quote}} in App@4:20] で未定義のプロパティ 'quotes' を読み取れません

私のComponent.ts

import {Component, OnInit, Injectable} from 'angular2/core';
import {Http, HTTP_PROVIDERS, URLSearchParams} from 'angular2/http';
import 'rxjs/add/operator/map';

@Component({
  selector: 'app',
  template: `<ul>
                <li (click)='myAlert()'> Helow World</li>
             </ul>
             <div>
              <spam>{{quote.contents.quotes.quote}}</spam>
             </div>`,
  providers: [HTTP_PROVIDERS]
})

export class App {
  public quote: Object;
  public  logError: string;

  constructor(private http: Http){
    this.quote = {};
  }

  myAlert(){
      this.http.get("http://quotes.rest/qod.json").map(res => { return res.json()})
        .subscribe(
          data => this.quote = data,
          err => this.logError(err),
          () => console.log('Random Quote Complete')
      );

  }
}

私のboot.ts

import {bootstrap} from 'angular2/platform/browser'
import {App} from './component'
import {HTTP_PROVIDERS} from 'angular2/http';

bootstrap(App, [HTTP_PROVIDERS]).catch(err => console.error(err));

索引.html

<html>
  <head>
    <title>Angular 2 QuickStart</title>


    <!-- 1. Load libraries -->
    <script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
    <script src="node_modules/systemjs/dist/system.src.js"></script>
    <script src="node_modules/rxjs/bundles/Rx.js"></script>
    <script src="node_modules/angular2/bundles/angular2.dev.js"></script>
    <script src="https://code.angularjs.org/2.0.0-beta.1/http.js"></script>

    <!-- 2. Configure SystemJS -->
    <script>
    System.config({
      packages: {
        app: {
          format: 'register',
          defaultExtension: 'js'
        }
      }
    });
      System.import('app/boot')
            .then(null, console.error.bind(console));
    </script>

  </head>

  <!-- 3. Display the application -->
  <body>
    <app>Loading...</app>
  </body>

</html>

サービスのサブスクライブから値を取得してテンプレートに入れるにはどうすればよいですか?

4

1 に答える 1

1

テンプレートがいつロードされるquote.contentsかは未定義です。quote.contentsまた、配列が含まれていることに気付きました。その後、myAlert()方法を次のように変更しました。

myAlert(){
      this.http.get("http://quotes.rest/qod.json").map(res => { return res.json()})
        .subscribe(
          data => { this.quote = data.contents.quotes[0].quote; this.author = data.contents.quotes[0].author;},
          err => this.logError(err),
          () => console.log('Random Quote Complete')
      );
  }

そして、コンポーネントは次のことを行います:

@Component({
  selector: 'app',
  template: `<ul>
                <li (click)='myAlert()'> Helow World</li>
             </ul>
             <div>
              <spam>{{quote}}</spam>
              <br>
              <spam>{{author}}</spam>
             </div>`,
  providers: [HTTP_PROVIDERS]
})

そして今動作します。

注：私はあまりスキルがなく、Typescript別Angular2の方法があるかもしれません。

于 2016-01-31T16:33:42.420 に答える