I am dealing with Json data
models: Array<Model> = [
{
name: 'kanban',
version: '1',
processes: [
{
name: 'kanban',
version: '1',
descrption: 'kanabn'
},
{
name: 'kanban 2',
version: '2',
descrption: 'kanban 2'
}
]
},
{
name: 'gibier',
version: '1',
processes: [
{
name: 'gibier',
version: '1',
descrption: 'gibier'
},
{
name: 'gibier 2',
version: '2',
descrption: 'gibier 2'
}
]
}
];Using this, I have designed a page like below:
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="card" *ngFor="let app of models">
<div class="card-body">
<h2>{{app.name}}</h2>
<h4>{{app.version}}</h4>
</div>
</div>I have two cards displayed on the page.
When clicking on a card, I expect to see details specific to that appName.
** App.module.Ts **
{
path: 'applicationDashboard',
component: ApplicationDashboardComponent
}, {
path: 'applicationDashboard/:id',
component: ApplicationDetailComponent
},<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="row" *ngFor="let apps of models">
<div class="col-4" *ngFor="let process of apps.processes">
<div class="card">
<div class="card-body">
<div class="fadein">
<div class="item-box" ng-style="{'background-image': 'url(\'' + config.contextRoot + '/app/rest/models/' + process.id + '/thumbnail?version=' + imageVersion + '\')'}" (click)="showProcessDetails(process);" style="background-image: url("/activiti-app/app/rest/models/f6b21c92-81bb-4fc9-990f-852729e131f1/thumbnail?version=1533200931200");">
<div class="actions">
<span class="badge badge-secondary">v{{process.version}}</span>
</div>
<div class="details">
<h3 class="truncate ng-binding" [title]="">
{{process.name}}
</h3>
</div>
</div>
</div>
</div>
<div class="card-footer">
</div>
</div>
</div>
</div>import {
Component,
OnInit
} from '@angular/core';
import {
Model
} from '../../model';
import {
ModelService
} from '../../model.service';
import {
Route,
ActivatedRoute
} from '@angular/router';
@Component({
selector: 'app-application-detail',
templateUrl: './application-detail.component.html',
styleUrls: ['./application-detail.component.css']
})
export class ApplicationDetailComponent implements OnInit {
name;
model: any;
models: Array < Model > = [];
constructor(private modelservice: ModelService, private _route: ActivatedRoute) {
this.models = modelservice.getModel();
this.name = this._route.snapshot.paramMap.get('id');
console.log(this.name);
}
ngOnInit() {
this.model = this.models;
console.log(this.model);
}
showProcessDetails(process) {
console.log('keerthi', this.models.find(x => x.processes === process));
}
}I have implemented routing and data display in the above code.
The issue faced is:
Even though I can navigate to the correct page, all 4 processes in my json data are being displayed without considering the specific App.
Can someone provide assistance?
Thank you in advance!