角度路线和功能

Question

我想查看我的getDomain（）函数是否正在获取正确的路由ID号，以便它可以显示相应的图像。我不确定使用* ngIf时我的语法是否正确。下面是UI的图像以及相应的html文件和.ts文件。基本上，根据getDomain（）函数返回的内容，我会向用户返回一组显示的图像。

<div *ngIf = "getDomain() != 1" class ="row" >
    <button (click)="prev()" class="previous round">&#8249;</button>
    <div  [ngStyle] = "{'background-image': 'url('+ testing.url +')'}" class ="img-container">
    </div>
    <button (click)="next()" class="next round">&#8250;</button>
</div>

<div *ngIf = "getDomain() != 2" class ="row" >
    <button (click)="prev()" class="previous round">&#8249;</button>
    <div  [ngStyle] = "{'background-image': 'url('+ mocking.url +')'}" class ="img-container">
    </div>
    <button (click)="next()" class="next round">&#8250;</button>
</div>

<div *ngIf = "getDomain() != 3" class ="row" >
    <button (click)="prev()" class="previous round">&#8249;</button>
    <div  [ngStyle] = "{'background-image': 'url('+ xml.url +')'}" class ="img-container">
    </div>
    <button (click)="next()" class="next round">&#8250;</button>
</div>

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 { Domain } from '../library';
import { GraphService } from '../graph.service';
import { DomainService } from '../domain.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;
domain: Domain;
testing: any;
utilities: any;
library: Library;
visibleImages: any[] = [];

activeId = 0;


  constructor(private imageService: ImageService, private libraryService:LibraryService, private domainService: DomainService, 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);

      this.getDomain();
  }


  getDomain(): void{
    const id = +this.route.snapshot.paramMap.get('id');
    this.domainService.getDomain(id)
      .subscribe(domain => this.domain = domain);
  }


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

}

Answer 1

目前getDomain函数未返回任何值。

getDomain() {
 const id = this.route.snapshot.paramMap.get('id');
 this.domainService.getDomain(id)
   .subscribe(domain => this.domain = domain);
}

在html代码中，您可以针对domain变量

验证值

<div *ngIf = "domain === 1" class ="row" >
<button (click)="prev()" class="previous round">&#8249;</button>
<div  [ngStyle] = "{'background-image': 'url('+ testing.url +')'}" class ="img-container">
</div>
<button (click)="next()" class="next round">&#8250;</button>

    <               >     <               >