Угловой динамический массив, показывающий все результаты, а не только данные под идентификатором

Question

Я все еще пытаюсь изучить то, что мне кажется продвинутым Angular 5. Приведенный ниже код вводит число "id" из массива в URL, как и ожидалось, но когда я перехожу к model/1, он показывает все мои объекты из массив. Мне нужно только видеть объект под идентификатором 1 и то же самое для каждого объекта в массиве. Я нашел в Интернете столько противоречивой информации, от сопоставления до запросов, что я даже не уверен, где быть, и все, что я пробовал, не привело к лучшим результатам. Я включил весь код, с которым я работаю.

У меня есть массив объектов в моем файле JSON

[
{
    "id": 1,
    "label": "Metal Man",
    "sample": "/assets/img/metalman1.png",
    "fab": "https://sketchfab.com/models/1b3cb7f8a77145bc8616075e9036b025/embed",
    "img1": "/assets/img/metalman1.png",
    "img2": "/assets/img/metalman2.png",
    "img3": "/assets/img/metalman3.png"
  },
  {
    "id": 2,
    "label": "Magrot",
    "sample": "/assets/img/magrot1.png",
    "fab": "https://sketchfab.com/models/e20c8ade2f16452ca7f440aa84fc8e33/embed",
    "img1": "/assets/img/magrot1.png",
    "img2": "/assets/img/magrot2.png",
    "img3": "/assets/img/magrot3.png"
  },
  {
    "id": 3,
    "label": "Baseball and Bat",
    "sample": "/assets/img/ball1.png",
    "fab": "https://sketchfab.com/models/781c60d3449b46f996a081ae36c20cce/embed",
    "img1": "/assets/img/ball1.png",
    "img2": "/assets/img/ball2.png",
    "img3": "/assets/img/ball3.png"
  }
]

Мой шаблон для каждого из вышеперечисленных объектов-

<div class="columnFlex mainBlock" *ngFor="let model of modelwork">
<div class="modelImagery">
  <h1>{{ model.label }}</h1>
  <iframe [src]='sanitizer.bypassSecurityTrustResourceUrl(model.fab)'
    frameborder="1" allowvr allowfullscreen mozallowfullscreen="true"
    webkitallowfullscreen="true" onmousewheel=""></iframe>
    <img [src]="model.img1" />
    <img [src]="model.img2" />
    <img [src]="model.img3" />
  </div></div>

И мой Activatedroute настроил

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { CommonModule } from '@angular/common';
import { DomSanitizer } from '@angular/platform-browser';
import { ActivatedRoute } from '@angular/router';
import { Router } from '@angular/router';

@Component({
  selector: 'app-model',
  templateUrl: './model.component.html',
  styleUrls: ['./model.component.css']
})
export class ModelComponent implements OnInit {

  modelwork: any;

  constructor( private route: ActivatedRoute, private router: Router, private http: HttpClient, public sanitizer: DomSanitizer ) {
    this.sanitizer = sanitizer;

    this.route.params.subscribe(params => {this.modelwork = params['id'];});
 }

  ngOnInit(): void {
       this.http.get<any>('./assets/models.json').subscribe(
         data => {
           this.modelwork = data;
         })
  }

}

Любое разъяснение о том, что мне нужно сделать, будет так ценно! Я пытаюсь выучить Angular за несколько дней, и это сложнее, чем я ожидал. Спасибо, что нашли время посмотреть на это!

Answer 1

Я не вижу здесь ничего продвинутого. У вас просто есть две асинхронные операции, которые обе устанавливают переменную модель работы. Одна из операций устанавливает для модели целое число, а для другой - массив json. в зависимости от того, какая операция разрешается первой.

редактировать

Глядя на ваш комментарий, я вижу, что вы хотите сделать. Вот пример:

chosenIndex: any;
modelwork: any;

constructor( private route: ActivatedRoute, private router: Router, private http: HttpClient, public sanitizer: DomSanitizer ) {
  this.sanitizer = sanitizer;
}

ngOnInit(): void {
  this.route.params.subscribe(params => {
    this.chosenIndex = params['id'];

    this.http.get<any>('./assets/models.json').subscribe(data => {
      this.modelwork = data.filter(d => d['id'] == this.chosenIndex);
    })
  });
}

Модельная работа теперь будет содержать массив из 1 объекта. Один объект, который вы хотите. Вы можете изменить этот пример, чтобы получить любой желаемый результат.