无法访问html中的this.project.responsibility.Reposity

Question

这里我被困在项目中的打印责任上。您可以参考下面的json来查看。我无法访问HTML中的this.project.responsibility.responsibility。请帮帮我。我试过很多方法来访问它，但我做不到。请告诉我们如何访问数组内部的数组意味着数组内部。

project.component.html

<p-dataList [value]="projects">
<p-header>
projects
</p-header>
<ng-template let-project let-i="index" pTemplate="item">
<div class="ui-g ui-fluid car-item">
<div class="ui-g-12 ui-md-4" style="text-align:center">
</div>
<div class="ui-g-12 ui-md-8 car-details">
<div class="ui-g">
<div class="ui-g-2 ui-sm-6"><b>Project no {{i+1}}</b></div>
<div class="ui-g-10 ui-sm-6"></div>
<div class="ui-g-2 ui-sm-6">Customer Name:</div>
<div class="ui-g-10 ui-sm-6"> {{ this.project.CustomerName }}</div> 
<div class="ui-g-2 ui-sm-6">Responsibility: </div>
<div class="ui-g-10 ui-sm-6">{{ this.project.responsibility.Responsibility }}</div>
<div class="ui-g-2 ui-sm-6">description:</div>
<div class="ui-g-10 ui-sm-6">{{ this.project.responsibility.description }}</div>
</div>
</div>
</div> 
</ng-template>
</p-dataList>

project.component.ts

import { Component, OnInit } from '@angular/core';
import * as jwt from 'angular2-jwt/angular2-jwt';
import { CardModule } from 'primeng/card';
import { ScrollPanelModule } from 'primeng/scrollpanel';
import { PersonListService,Person, Project, ProjectResponsibility} from './person-list.service';
import {DataListModule} from 'primeng/datalist';
@Component({ 
moduleId: module.id,
selector: 'sd-project',
templateUrl: 'project.component.html',
styleUrls: ['project.component.css']
})
export class ProjectComponent implements OnInit {
errorMessage: any;
projects: Project[];
projectresponsibilities:ProjectResponsibility[];
constructor(public personListService:PersonListService){}
ngOnInit() {
// console.log(jwt.AuthConfig);
this.getperson();
console.log("creaea");
}
getperson(){
this.personListService.getProject()
.subscribe(
resp => this.projects = resp.Projects,
//resp => this.addresses = resp.Addresses,
error => this.errorMessage = <any>error
);
}
}
person-list.service.ts
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs/Observable';
export class Project{
ProjectId:number;   
CustomerName:string="";
ProjectTitle:string="";
ProjectType:string="";
FromDate:Date;
TodaysDate:Date;
ProjectDescription:string="";
Role:string="";
ResponsibilityId:number;
Responsibility:string="";
Description:string="";
}
export class Person{
Projects:Project [];
}
@Injectable()
export class PersonListService {
/**
* Creates a new NameListService with the injected HttpClient.
* @param {HttpClient} http - The injected HttpClient.
* @constructor
*/
constructor(private http: HttpClient) {}
/**
* Returns an Observable for the HTTP GET request for the JSON resource.
* @return {string[]} The Observable for the HTTP request.
*/
getProject(): Observable<{ Projects: Project[]}>{
console.log("Inside the get service")
return this.http.get('app/person/person.json')
// .do(data => console.log('server data:', data))  // debug
.catch(this.handleError);
}
* Handle HTTP error
*/
private handleError (error: any) {
// In a real world app, we might use a remote logging infrastructure
// We'd also dig deeper into the error to get a better message
const errMsg = (error.message) ? error.message :
error.status ? `${error.status} - ${error.statusText}` : 'Server error';
console.error(errMsg); // log to console instead
return Observable.throw(errMsg);
}
}

person.json

{
"Projects": [
{
"ProjectId":1,  
"CustomerName":"Abc Company",
"ProjectTitle":"Website",
"ProjectType":"Educational",
"FromDate":"2/2011",
"ToDate":"2/2012",
"ProjectDescription":"It is the college website",
"Role":"Data analysis",
"Responsibilities": [
{
"ResponsibilityId":1,
"Responsibility":"Find requirements",
"description":"It is the practice of finding the requirements"
}
]
}
]
}

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { CommonModule } from '@angular/common';
import { APP_BASE_HREF } from '@angular/common';
import { HttpClientModule } from '@angular/common/http';
import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { HomeModule } from './home/home.module';
import { ServicesModule } from './services/services.module';
import { TestimonialModule } from './testimonial/testimonial.module';
import { PersonModule } from './person/person.module';
import { FormModule } from './form/form.module';
import { SharedModule } from './shared/shared.module';
import { FormsModule } from '@angular/forms';
import { CardModule } from 'primeng/card';
import { DemographicComponent } from './person/demographic.component';
import { ContactComponent } from './person/contact.component';
import {DataListModule} from 'primeng/datalist';
import { EduQualificationComponent } from './person/eduqualification.component';
import {SidebarModule} from 'primeng/sidebar';
import {CalendarModule} from 'primeng/calendar';
import { LoginFormComponent } from './authentication/loginform.component';
import { LoginFormModule } from './authentication/loginform.module';
import {AutoCompleteModule} from 'primeng/autocomplete';
import {Validators,FormControl,FormGroup,FormBuilder} from '@angular/forms';
import {Message,SelectItem} from 'primeng/api';
import {ReactiveFormsModule}    from '@angular/forms';

@NgModule({
imports: [CommonModule,BrowserModule, BrowserAnimationsModule,FormsModule, ReactiveFormsModule, HttpClientModule, AutoCompleteModule , AppRoutingModule, HomeModule, ServicesModule, CardModule,
TestimonialModule,PersonModule,FormModule,LoginFormModule,DataListModule,SidebarModule,CalendarModule,FormsModule, SharedModule.forRoot()],
declarations: [AppComponent],
providers: [{
provide: APP_BASE_HREF,
useValue: '<%= APP_BASE %>'
}],
bootstrap: [AppComponent]
})
export class AppModule { }

project.component.html

<div *ngIf="let project of projects; let i=index">
<div class="ui-g-2 ui-sm-6"><b>Project no {{i+1}}</b>
</div>
<div class="ui-g-2 ui-sm-6">Customer Name:</div>
<div class="ui-g-10 ui-sm-6"> {{ project.CustomerName }}</div> 
<div class="ui-g-2 ui-sm-6">Responsibility: </div>
<div *ngIf="let item of projects.Responsibilities;">
<div class="ui-g-10 ui-sm-6">
<p>Id  {{ item.Responsibility }} </p>                          
</div>
<div class="ui-g-2 ui-sm-6">description:</div>
<p>Id  {{ item.description }} </p>       
</div>
</div>

请告诉我们如何访问数组内部的数组意味着数组内部。非常感谢。

Answer 1

您的代码看起来不对。您无法在html页面中访问this.projects。这是错误的。你可以修改这些东西，

第一种方式：-

注意：-虽然您的json项目Array Responsibility是一个可以这样使用的数组(使用两个循环(

<div *ngFor="let project of projects; let i=index">
<div class="ui-g-2 ui-sm-6"><b>Project no {{i+1}}</b>
</div>
<div class="ui-g-2 ui-sm-6">Customer Name:</div>
<div class="ui-g-10 ui-sm-6"> {{ project.CustomerName }}</div> 
<div class="ui-g-2 ui-sm-6">Responsibility: </div>
<div *ngIf="let item of projects.Responsibilities;">
<div class="ui-g-10 ui-sm-6">
<p>Id  {{ item.Responsibility }} </p>                          
</div>
<div class="ui-g-2 ui-sm-6">description:</div>
<p>Id  {{ item.description }} </p>       
</div>
</div>
</div>

第二种方式：-注意：-虽然您的json项目Array Responsibility是一个单独的数组，但您可以这样使用(使用[0]索引(

<div *ngFor="let project of projects; let i=index">
<div class="ui-g-2 ui-sm-6"><b>Project no {{i+1}}</b>
</div>
<div class="ui-g-2 ui-sm-6">Customer Name:</div>
<div class="ui-g-10 ui-sm-6"> {{ project.CustomerName }}</div> 
<div class="ui-g-2 ui-sm-6">Responsibility: </div>            
<div class="ui-g-10 ui-sm-6">
<p>Id  {{ projects.Responsibilities[0].Responsibility }} </p>                          
</div>
<div class="ui-g-2 ui-sm-6">description:</div>
<p>Id  {{ projects.Responsibilities[0].description }} </p>       
</div>           
</div>

我正在用样品标签做样品。你可以修改你的便利。请尝试一下，如果有任何错误，请告诉我。

我希望它能解决你的问题。

编辑：-

import { CommonModule } from '@angular/common';  
@NgModule({
imports: [CommonModule],  
})

在app.module.ts文件中导入这些东西

对不起，我更新了我的答案，请第一次尝试