Question

我仍在尝试学习像高级Angular 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>

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

我在这里看不到任何进展。你有简单的两个异步操作，它们都设置变量'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); }) }); }

模型工作现在将包含1个对象的数组。你想要的一个对象。您可以更改此示例以获得所需的输出。

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

1 个答案: