Arrays 显示所有结果的角度动态数组，而不仅仅是id下的数据

我仍在努力学习我认为是高级的5。下面的代码确实按照预期将数组中的“id”号输入到url中，但是当我转到model/1时，它显示了我的所有数组中的对象。我只需要看到id为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>

{{model.label}

我的活动路线已经设置好了-

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/core'导入{Component，OnInit}；
从'@angular/common/http'导入{HttpClient}；
从“@angular/common”导入{CommonModule}；
从“@angular/platform browser”导入{domsanizer}；
从'@angular/router'导入{ActivatedRoute}；
从'@angular/Router'导入{Router}；
@组成部分({
选择器：“应用程序模型”，
templateUrl:'./model.component.html'，
样式URL:['./model.component.css']
})
导出类ModelComponent实现OnInit{
模型：任何；
构造函数（私有路由：ActivatedRoute，私有路由器：router，私有http:HttpClient，公共sanitizer:Domsanizer）{
这个。消毒剂=消毒剂；
subscribe（params=>{this.modelwork=params['id']；}）；
}
ngOnInit（）：void{
this.http.get（'./assets/models.json'）.subscribe(
数据=>{
this.modelwork=数据；
})
}
}

---

任何关于我需要做什么的澄清都将不胜感激！我试着在几天内学习角度，这比我想象的要复杂得多。谢谢你花时间看这个

我在这里没有看到任何进展。您有两个简单的异步操作，都设置了变量“modelwork”。其中一个操作将modelwork设置为整数，另一个操作将其设置为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);
    })
  });
}

chosenIndex:any；
模型：任何；
构造函数（私有路由：ActivatedRoute，私有路由器：router，私有http:HttpClient，公共sanitizer:Domsanizer）{
这个。消毒剂=消毒剂；
}
ngOnInit（）：void{
this.route.params.subscribe（params=>{
this.chosenIndex=params['id']；
this.http.get（'./assets/models.json'）.subscribe（数据=>{
this.modelwork=data.filter（d=>d['id']==this.chosenIndex）；
})
});
}

---

Modelwork现在将包含一个由1个对象组成的数组。你想要的东西。您可以更改此示例以获得所需的任何输出。

您在本示例中面临的确切问题。请告诉我们，我试图每页只显示这些数据-

“id”：1，“label”：“Metal Man”，“sample”：“/assets/img/metalman 1.png”，“fab”：https://sketchfab.com/models/1b3cb7f8a77145bc8616075e9036b025/embed“，“img1”：“/assets/img/metalman 1.png”，“img2”：“/assets/img/metalman 2.png”，“img3”：“/assets/img/metalman3.png“

现在，它正在同一页中显示所有3段代码。因此，如果我访问website.com/model/1，我只需要查看id 1ok下的信息，这是有意义的，但您将如何确定哪些键应该显示在第1页上，哪些键需要显示在第2页上，页码和数据中的任何关系我觉得我在这方面偏离了轨道。我没意识到我能找到路线。在恩戈尼尼特。我所看到的所有例子都在构造函数下，这让我很反感。感觉比现在要复杂得多。很明显，你对Angular和Typescript都很了解，有没有一门课、一本书或一个教程让你学习这个？我被抛进了这个世界，我正在努力超越速度。再次感谢你花时间看这个，并帮助我解决问题。没问题。工作只是给了我一些时间冷静地学习，这使它成为一种更愉快的经历。没有课程或书籍，只有测试项目和时间。这太棒了，我还有几天的时间来解决这些问题，我是唯一一个从事大型项目的前端开发人员。再次非常感谢您的帮助：）如果您需要任何快速答案，我会整天打开stackoverflow。我完成了我的项目，但由于某种原因，当我在GoDaddy上构建并部署dist内容到我的Plesk服务器时，我根本没有得到JSON。Chrome工具显示了一个用于查找JSON的404，但它在本地工作得非常好。我是否遗漏了让服务器找到JSON的重要内容？即使我只是把文件放进URL，它也根本找不到文件。