0

我仍在尝试学习在我看来像高级 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，它比我预期的要复杂。感谢您花时间看这个！

4

1 回答 1

1

我在这里没有看到任何先进的东西。您简单地有两个异步操作，它们都设置了变量“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);
    })
  });
}

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

于 2018-05-01T06:08:57.273 回答