TypeScriptからオブジェクトのプロパティにアクセスするには？

Question

私はAngularとTypeScriptが初めてで、MEANスタック（MongoDB、Express、Angular、Node.js）を使ってプロジェクトに取り掛かりました。

私はこのマングースモジュールを作成：

import * as mongoose from 'mongoose'; 

var Schema = mongoose.Schema; 
const entrepriseSchema = new mongoose.Schema({ 
    name: {type: String, unique: true, required : true}, 
    telephone: Number, 
    logo: String, 
    web_site: String, 
    sites: [ 
    {site_id: {type: Schema.Types.ObjectId, ref: 'Site'}} 
    ] 
}); 

const Entreprise = mongoose.model('Entreprise', entrepriseSchema); 

export default Entreprise; 

と、これは私のentreprise.component.tsです：

import { Component, OnInit } from '@angular/core'; 
import { Http } from '@angular/http'; 
import { FormGroup, FormControl, Validators, FormBuilder } from '@angular/forms'; 
import { ActivatedRoute } from '@angular/router'; 

import { EntrepriseService } from '../services/entreprise.service'; 
import { SiteService } from '../services/site.service'; 


@Component({ 
    selector: 'app-entreprise', 
    templateUrl: './entreprise.component.html', 
    styleUrls: ['./entreprise.component.scss'], 
    providers: [EntrepriseService, SiteService] 
}) 
export class EntrepriseComponent implements OnInit { 


    entreprise = {}; 
    sites = []; 
    id: String; 

    constructor(private entrepriseService: EntrepriseService, 
       private siteService: SiteService, 
       private http: Http, 
       private route: ActivatedRoute) { 
    this.id = route.snapshot.params['id']; 
    } 

    ngOnInit() { 
    this.getEntrepriseById(this.id); 
    //not working 
    //console.log(this.entreprise.name); 
    //console.log(this.entreprise.sites); 
    //this.getSitesIn(this.entreprise.sites); 
    } 

    getEntrepriseById(id) { 
    this.entrepriseService.getEntreprise(id).subscribe(
     data => this.entreprise = data, 
     error => console.log(error) 
    ); 
    } 

    getSitesIn(ids) { 
    this.siteService.getSitesIn(ids).subscribe(
     data => this.sites = data, 
     error => console.log(error) 
    ); 
    } 
} 

私はentreprise.component.htmlから返されたのプロパティを表示しようとすると、それはうまく動作し、すべてのプロパティを表示します：

<h3>{{entreprise.name}}</h3> 
     <div *ngFor="let site of entreprise.sites"> 
     {{site.site_id}} 
     </div> 
     {{entreprise.logo}} 
     {{entreprise.web_site}} 

どのように私は同じprにアクセスできますかTypeScript側での操作は？ EntrepriseComponentのコメント付きコードは、私が達成しようとしているものですが、this.entrepriseがタイプ{}であるため動作しません。

Answer 1

Node.jsのMongooseで作成したEnterpriseモデル/スキーマはサーバー側にあります。 UIのTypeScriptコードでEnterpriseのプロパティを認識させるには、角度コードベースでクラスを作成する必要があります。

servicesフォルダと同じレベルに、たとえばmodelsという名前のフォルダを作成します。次の内容（オプション）

前のステップで作成したmodelsフォルダ内の二つのファイル命名site.tsとenterprise.tsを作成します（あなたがしたい場合は、別の場所でこれらのファイルを置くことができます）：

site.ts

export interface Site { 
site_id?: string; 
} 

enterprise.ts

import { Site } from './site'; 
export interface Enterprise { 
name?: string; 
telephone?: string; 
logo?: string; 
web_site?: string; 
sites?: Site[]; 
} 

今

、EntrepriseComponentファイル内に、以下の輸入

import { Enterprise} from '../models/entreprise'; 
import { Site } from '../models/site'; 

を追加し、現在

export class EntrepriseComponent implements OnInit { 

    entreprise: Enterprise = {}; 
    sites: Site[] = []; 

にEntrepriseComponentファイル内の最初の行を変更し、企業の属性がタイプEnterpriseのものであろうと、あなたは意志enterprise.tsファイルで宣言したプロパティにアクセスできるようにします。

更新：すぐngOnInit()機能でthis.getEntrepriseById(this.id);後 また、あなたがすることができませんconsole.log(this.enterprise.name)。これは、エンタープライズオブジェクトを取得するために作成しているWebサービスが、コンソールにログオンしようとしているときに解決されていないためです。

エンタープライズオブジェクトをコンソールに表示する場合や、サービスコールが解決された後に実行する必要のあるコードを実行したい場合は、this.enterpriseオブジェクトに値がある場合、これを実行する最も適切な場所はgetEntrepriseById関数。[私はangular2において観察/ HTTP /非同期呼び出しからの応答を返すにはどうしますか？]の

getEntrepriseById(id) { 
    this.entrepriseService.getEntreprise(id).subscribe(
     data => { 
      this.enterprise = data; 
      console.log(this.enterprise.name); 
      // Any code to run after this.enterprise resolves can go here. 
     }, 
     error => console.log(error) 
    ); 
    }