如何使用嵌套插值或任何其他语法从对象内部获取对象数组

Question

我从 api 中得到我的值，看起来像这样。我正在尝试获取对象映射数组中的值

{
"aMovieId": 1,
"aTitle": "Django Unchained",
"aRating": 4,
"aImageLink": "http://upload.wikimedia.org/wikipedia/en/8/8b/Django_Unchained_Poster.jpg",
"aTrailerLink": "//www.youtube.com/embed/eUdM9vrCbow",
"aGenre": "Western",
"aWideImage": "images/django.jpg",
"tblMovieActorMapping": [
    {
        "aActor": {
            "aActorName": "Leonardo Di Caprio"
        }
    },
    {
        "aActor": {
            "aActorName": "Christoph Waltz"
        }
    }
],
"tblMovieDirectorMapping": [
    {
        "aDirector": {
            "aDirectorName": "Martin Scorsese"
        }
    },
    {
        "aDirector": {
            "aDirectorName": "Sofia Coppola"
        }
    }
]

}

我正在尝试像这样显示 HTML 中的值-

<p >
<img alt={{movie.aTitle}} src="../{{movie.aWideImage}}" /><br>
{{movie.aMovieId}}<br>
{{movie.aTitle}}<br>
{{movie.aMovieDescription}}<br>
{{movie.aDuration}}<br>
{{movie.aGenre}}<br>
{{movie.tblMovieActorMapping}}
{{movie.tblMovieDirectorMapping}}
<img width=200px height=300px alt={{movie.aTitle}} src={{movie.aImageLink}} /><br>
<iframe width=560px height=315px src={{movie.aTrailerLink}} frameborder="0" allowfullscreen></iframe>

如何访问映射中的值？此外，我无法在 iframe 标记内进行插值。

Answer 1

这是一个像下面这样的工作演示：

fetch-data.component.html:

<table class='table table-striped' aria-labelledby="tableLabel" >
<tbody>
  <tr>
    <td><img width="100" height="100" alt={{movie.aTitle}} src="../{{movie.aWideImage}}" /></td>
    <td>{{movie.aMovieId}}</td>
    <td>{{movie.aTitle}}</td>
    <td>{{movie.aMovieDescription}}</td>
    <td>{{movie.aDuration}}</td>
    <td>{{movie.aGenre}}</td>
    <td>
      <table>
        <tr *ngFor="let index of movie.tblMovieActorMapping; index as i">
          <td>{{movie.tblMovieActorMapping[i].aActor.aActorName}}</td>
        </tr>
      </table>
    </td>
    <td>
      <table>
        <tr *ngFor="let index of movie.tblMovieDirectorMapping; index as i">
          <td>{{movie.tblMovieDirectorMapping[i].aDirector.aDirectorName}}</td>
        </tr>
      </table>
    </td>
    <td><img width="200" height="300" alt={{movie.aTitle}} src={{movie.aImageLink}} /></td>
    <td>
    <iframe width="450" height="300" [src]='safeUrl' frameborder="0" allowfullscreen></iframe>
    </td>
  </tr>
</tbody>

fetch-data.component.ts:

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

@Component({
  selector: 'app-fetch-data',
  templateUrl: './fetch-data.component.html'
})

export class FetchDataComponent implements OnInit {
  movie: any = [];
  safeUrl: any;
  constructor(private sanitizer: DomSanitizer,private http: HttpClient) { }

  ngOnInit() {
    this.http.get('https://localhost:44366/weatherforecast')
      .subscribe(
        (data) => {
          console.log(data);
          this.movie = data;
          this.safeUrl = this.sanitizer.bypassSecurityTrustResourceUrl(this.movie.aTrailerLink);

        });
  } 
}

我的测试控制器：

[ApiController]
[Route("[controller]")]
public class WeatherForecastController : ControllerBase
{
    [HttpGet]
    public Test Get()
    {
        var data = System.IO.File.ReadAllText("test1.json");
        var model = JsonSerializer.Deserialize<Test>(data);
        return model;
    }
}

我的测试模型：

public class Test
{
    public int aMovieId { get; set; }
    public string aTitle { get; set; }
    public int aRating { get; set; }
    public string aImageLink { get; set; }
    public string aTrailerLink { get; set; }
    public string aGenre { get; set; }
    public string aWideImage { get; set; }
    public Tblmovieactormapping[] tblMovieActorMapping { get; set; }
    public Tblmoviedirectormapping[] tblMovieDirectorMapping { get; set; }
}
public class Tblmovieactormapping
{
    public Aactor aActor { get; set; }
}
public class Aactor
{
    public string aActorName { get; set; }
}
public class Tblmoviedirectormapping
{
    public Adirector aDirector { get; set; }
}
public class Adirector
{
    public string aDirectorName { get; set; }
}

结果：

如何使用嵌套插值或任何其他语法从对象内部获取对象数组

How to use nested interpolation or any other syntax to get array of object from inside an object

html

angularjs

asp.net-core