Chris Chris -4 years ago 115
ASP.NET (C#) Question

Display all items in an array property in Angular 2

I have a type script component that defines two interfaces like:

interface Project {
name: string;
activity: string;
lastBuildStatus: string;
lastBuildTime: string;
lastBuildLabel: string
webUrl: string;


}

interface GoArray {
projects: Array<Project>;


}

The components makes a call to an ASP Core controller to return an object with property 'Projects' Which itself is a list of 'Project' objects. So I believe this matches my interface definitions. In the controller I set an object of type GoArray to the result from the controller

export class GoComponent {
public projectsArray: GoArray;

constructor(private http: Http) {
}

public getPipelineStatus(chosenUsername: string, chosenPassword: string, chosenUrl: string) {

// debugger;
this.http.get('api/go/cctray?username=' + chosenUsername + '&password=' + chosenPassword + '&uri=' + chosenUrl).subscribe(result => {
this.projectsArray = result.json();
});


This seems to be returning data in the format I expect. But how do I then display all items in the array in my components HTML?

I've tried

<div *ngIf="projectsArray">
<div *ngFor='let project of projectsArray.projects'>
{{project.Name}}
{{project.Activity}}
</div>




Nothing gets rendered on the screen with this, but if I inspect the component using Augury, it appears as though the projectsArray is populated as I expected

enter image description here

How do I iterate over the list and display the properties of each of the objects?

Thanks

Answer Source

It should be,

<div *ngFor='let project of projectsArray.projects'>
    {{project.name}}
    {{project.activity}}
</div>
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download