Question

大家好我无法理解为什么当我点击一张卡片时加载一些内容而不是将它加载到每张卡片上，请看这里的图像：https://imgur.com/a/yYHIt 我在角度上非常新颖，并通过角色网站上的英雄之旅的粘贴做最多的事情。数据从我的数据库中提取我的孩子html

<div *ngIf="personaggio">
  <h2> {{ personaggio.nome | uppercase }} Suoni:</h2>
  <div>
    <div *ngFor="let suono of suoni">
      <div *ngIf="suono.fk_to_personaggi === personaggio.idpersonaggi">
      {{suono.titolo}}
    </div>
  </div>
</div>

我的孩子ts

import { Component, OnInit,Input } from '@angular/core';
import { Suono } from '../class/suono';
import { Personaggio } from '../class/personaggio';
import { MyService } from '../services/my.service';

@Component({
  selector: 'app-suoni',
  templateUrl: './suoni.component.html',
  styleUrls: ['./suoni.component.css']
})
export class SuoniComponent implements OnInit {
  @Input() personaggio: Personaggio;
  suoni: Suono[];

  constructor(private mySevice: MyService) { }

  ngOnInit() {
    this.getSuoni();
  }

  getSuoni(): void {
    console.log("called getSuoni()");
    this.mySevice.getSuoni()
    .subscribe(suoni => this.suoni = suoni);
  }
}

我的父母html

<mat-card class="card" *ngFor="let personaggio of personaggi" (click)="onSelect(personaggio)" >

  <mat-card-header>
    <div mat-card-avatar class="card-header"></div>
    <img mat-card-avatar src={{personaggio.immagine}}>
    <mat-card-title>{{personaggio.nome}}</mat-card-title>
    <mat-card-subtitle>{{personaggio.youtube_link}}</mat-card-subtitle>
  </mat-card-header>

  <mat-card-content>
    <app-suoni [personaggio]="selectedPersonaggio"></app-suoni>
  </mat-card-content>

</mat-card>

我的父母ts

import { Component, OnInit } from '@angular/core';
import { Personaggio } from '../class/personaggio';
import { MyService } from '../services/my.service';


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

  personaggi: Personaggio[];
  selectedPersonaggio: Personaggio;

  constructor(private mySevice: MyService) { }

  ngOnInit() {
    this.getPersonaggi();
  }

  getPersonaggi(): void {
    this.mySevice.getPersonaggi()
    .subscribe(personaggi => this.personaggi = personaggi);
  }

  onSelect(personaggio: Personaggio): void {
    console.log("called onSelect()");
    this.selectedPersonaggio = personaggio;
  }

}

Answer 1

您应该只在mat-card-content内显示mat-card，其中会显示有关所选“人物”的信息。您可以使用ngIf指令。

<mat-card class="card" *ngFor="let personaggio of personaggi" (click)="onSelect(personaggio)" >

  <mat-card-header>
    <div mat-card-avatar class="card-header"></div>
    <img mat-card-avatar src={{personaggio.immagine}}>
    <mat-card-title>{{personaggio.nome}}</mat-card-title>
    <mat-card-subtitle>{{personaggio.youtube_link}}</mat-card-subtitle>
  </mat-card-header>

  <mat-card-content *ngIf="personaggio === selectedPersonaggio">
    <app-suoni [personaggio]="selectedPersonaggio"></app-suoni>
  </mat-card-content>

</mat-card>

Angular Material加载卡内容

1 个答案: