当我单击应用程序时，如何路由到特定的应用程序详细信息

Question

我有Json数据

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' } ] } ];

因此我通过使用

创建了一个页面

<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>

所以我有两张卡

因此，当我单击一张卡时，我应该获得特定 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(&quot;/activiti-app/app/rest/models/f6b21c92-81bb-4fc9-990f-852729e131f1/thumbnail?version=1533200931200&quot;);">
            <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));
  }

}

我已经编写了上面的代码，用于路由和显示数据。

发生了什么事

我可以路由到正确的页面，但是我正在显示json数据中的所有4个过程，而与特定的应用无关

有人可以帮忙吗？

谢谢。！

Answer 1

您只需要使用 (click) 而不是 ng-click （这是angularjs语法）

(click)="showProcessDetails(process);

Answer 2

我从我要路由的ID取了名字：

this.name = this._route.snapshot.paramMap.get('id');

此后，我遍历了模型并通过检查this.name

获得了详细信息

在html中我也使用了*ngFor="let apps of model.processes"

*ngIf="apps.name ==name"

import {
  Component,
  OnInit
} from '@angular/core';
import {
  Model
} from '../../model';
import {
  ModelService
} from '../../model.service';
import {
  Route,
  ActivatedRoute,
  Router
} 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, private router: Router) {
    this.name = this._route.snapshot.paramMap.get('id');
    console.log('name', this.name);
  }

  ngOnInit() {
    this.models = this.modelservice.getModel();
    for (let i = 0; i < this.models.length; i++) {
      if (this.name === this.models[i].name) {
        this.model = this.models[i];
        console.log('model:', this.model);
      }
    }
  }
  showProcessDetails(process) {
    this.router.navigate(['/process', process.name]);
  }

}

<div class="container-fluid">
  <div>
    <nav class="navbar subheader">
      <h2>App definition Details :{{name}} </h2>
    </nav>
  </div>
  <div class="jumbotron">
    <div class="col-4 preview-wrapper justify-content-start" *ngFor="let apps of model.processes">
      <div class="card" *ngIf="apps.name ==name">
        <div class="card-body app theme-1">
          <div class="app-content">
            <h3>{{apps.name}}</h3>
            <p>{{apps.details}}</p>
          </div>
          <div class="backdrop">
            <i ng-show="!app.appDefinition.icon" class="icon icon-choice ng-hide"></i>
            <i ng-show="app.appDefinition.icon" class="fa fa-asterisk" aria-hidden="true"></i>
          </div>
          <div class="logo">
            <i ng-show="!app.appDefinition.icon" class="icon icon-choice ng-hide"></i>
            <i ng-show="app.appDefinition.icon" class="fa fa-asterisk" aria-hidden="true"></i>
          </div>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-4" *ngFor="let process of model.processes">
        <div class="card">
          <div class="card-body">
            <div class="fadein">
              <div class="item-box" (click)="showProcessDetails(process);">
                <div class="actions">
                  <span class="badge badge-secondary">v{{process.version}}</span>
                </div>
                <div class="details">
                  <h3 class="truncate">
                    {{process.name}}
                  </h3>
                </div>
              </div>
            </div>
          </div>
          <div class="card-footer">
          </div>
        </div>
      </div>
    </div>
  </div>
</div>