我有9个按钮，用户可以点击。每个按钮代表不同的库类型。一旦用户单击了库类型，就会有另外9个按钮来描述库类型的属性。我将有9个阵列但是现在我只有2个，基本上我想根据用户已执行的按钮加载特定的数组。例如，用户单击测试域按钮，将其移动到显示测试域属性的下一页。然后用户点击一个属性，基于此我想用所有图像加载测试域。
我不认为我的片段描述了我试图解释的内容，所以我提供了一个编辑URL来编写stackblitz bello的代码。
https://stackblitz.com/github/pennyfea/Project3-HCI
这是我的html文件，我尝试根据用户选择的内容来区分要显示的数组。
<div *ngIf="image">
<h2>{{ image.catergory | uppercase }}</h2>
<div>
<div class ="row" >{{activeImage}}
<button (click)="prev()" class="previous round">‹</button>
<div [ngStyle] = "{'background-image': 'url('+ testing.url +')'}" class ="img-container">
</div>
<button (click)="next()" class="next round">›</button>
</div>
<!-- <div class ="row" >{{activeImage}}
<button (click)="prev()" class="previous round">‹</button>
<div [ngStyle] = "{'background-image': 'url('+ utilities.url +')'}" class ="img-container">
</div>
<button (click)="next()" class="next round">›</button>
</div>
-->
这是我的graph.service文件，我为每个域创建了图像数组。
import { Injectable } from '@angular/core';
@Injectable()
export class GraphService {
constructor() { }
// getGraph(id: number){
// return GRAPHS.slice(0).find(graph => graph.id == id)
// }
getTestingGraphs(id: number){
return TESTINGRAPHS.slice(0).find(graph => graph.id == id)
}
getUtilitiesGraphs(id:number){
return UTILITIESGRAPHS.slice(0).find(graph => graph.id == id)
}
}
const TESTINGRAPHS = [
{id: 1, catergory: "Popularity", url: "assets/img/pgraph.jpg" },
{id: 2, catergory: "releasefrequency", url: "assets/img/rqgraph.jpg" },
{id: 3, catergory: "lmd", url: "assets/img/lmd.jpg" },
{id: 5, catergory: "last discuss overflow", url: "assets/img/ldof.png" },
{id: 6, catergory: "performance", url: "assets/img/performance.jpg" },
{id: 7, catergory: "security", url: "assets/img/security.jpg" },
{id: 8, catergory: "responsetime", url: "assets/img/responsetime.png" },
{id: 9, catergory: "closingtime", url: "assets/img/isueclosing.png" }
];
const UTILITIESGRAPHS = [
{id: 1, catergory: "last discuss overflow", url: "assets/img/ldof.png" },
{id: 2, catergory: "performance", url: "assets/img/performance.jpg" },
{id: 3, catergory: "security", url: "assets/img/security.jpg" }
];
这是我的metric-view.component.ts文件，其中我得到了不同的数组。我不是全部9.现在只有两个。
import { Component, OnInit } from '@angular/core';
import { Router, ActivatedRoute, ParamMap } from '@angular/router';
import { Location } from '@angular/common';
import { ImageService } from '../metric-details/shared/image.service';
import { LibraryService } from '../library.service';
import { Library } from '../library';
import { GraphService } from '../graph.service';
import { map,mergeMap } from 'rxjs/operators';
@Component({
selector: 'app-metric-view',
templateUrl: './metric-view.component.html',
styleUrls: ['./metric-view.component.css']
})
export class MetricViewComponent implements OnInit {
image: any
testing: any;
utilities: any;
library: Library;
visibleImages: any[] = [];
activeId = 0;
constructor(private imageService: ImageService, private libraryService:LibraryService, private graphService:GraphService, private location: Location, private route: ActivatedRoute, private router: Router) {
this.visibleImages = this.imageService.getImages();
}
ngOnInit() {
const id$ = this.route.paramMap.pipe(map((params) => params.get('id') || 0), map(n => Number(n)));
id$.subscribe(id => {
this.activeId = id;
this.testing = this.graphService.getTestingGraphs(id);
this.utilities = this.graphService.getUtilitiesGraphs(id);
this.image = this.imageService.getImage(id);
});
id$.pipe(mergeMap(id => this.libraryService.getLibrary(id)))
.subscribe(library => this.library = library);
}
next() {
// const next = this.activeId + 1 >= this.image.length - 1 ? this.graph.length - 1 : this.activeId + 1;
const next = this.activeId + 1 >= 9 ? 1 : this.activeId + 1;
this.router.navigate(['/image/' + next]);
}
prev() {
const prev = this.activeId - 1 < 1 ? 9 : this.activeId - 1;
this.router.navigate(['/image/' + prev]);
}
}