角材料加载卡内容

Question

嗨，伙计们，我不明白为什么当我单击卡片时加载一些内容，而不是将其加载到每张卡片上，请参见此处的图像： https://i.stack.imgur.com/RFvBA.jpg我是角度的新手，通过应对角度网站上的英雄之旅的粘贴来做最多的事情。从我的数据库中获取数据我的孩子 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);
  }
}

我的父目录

<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内部显示有关所选"角色"信息的mat-card-content。您可以使用 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>