我是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}}
但是如何在TypeScript端访问相同的属性?
我正在尝试完成EntrepriseComponent中的注释代码,但是由于
this.entreprise
类型为{},因此无法正常工作。 最佳答案
您在Node.js的Mongoose中创建的Enterprise
模型/模式位于服务器端。如果要让UI上的TypeScript代码识别Enterprise
中的属性,则必须在角度代码库中创建一个类。
在与您的models
文件夹相同的级别上创建一个名为services
的文件夹。 (可选的)
在上一步创建的models
文件夹中创建两个名为site.ts和enterprise.ts的文件(如果需要,可以将这些文件放在不同的位置),其内容如下:
site.ts
export interface Site {
site_id?: string;
}
企业
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';
并将
EntrepriseComponent
文件中的第一行更改为export class EntrepriseComponent implements OnInit {
entreprise: Enterprise = {};
sites: Site[] = [];
现在,企业属性将为
Enterprise
类型,您将能够访问我们在enterprise.ts
文件中声明的属性。更新:
另外,您不能在
console.log(this.enterprise.name)
函数中的this.getEntrepriseById(this.id);
之后立即ngOnInit()
。这是因为当您尝试将其登录到控制台时,为获取企业对象而制作的Web服务将无法解析。如果要在控制台中查看企业对象,或者要运行一些代码,这些代码需要在服务调用已解决且
this.enterprise
对象具有值之后运行,那么最好的位置是您的getEntrepriseById
功能。将getEntrepriseById
函数更改为 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)
);
}