पहला यह है कि मैं पहले से ही प्रत्येक नाम के लिए एक छवि लूप रखने के लिए अपनी चरित्र सूची बना चुका हूं, मेरी संपत्ति में मेरे पास 1,2,3 और 10.jpg तक की छवियां हैं।

मैं इसे सूची के लिए इस तरह बनाता हूं:

import { Component, OnInit } from '@angular/core';
import { ActorService } from 'src/app/core/services/actor.service';

@Component({
  selector: 'app-actor-list',
  template: `
    <section class="section">
      <div class="container">
        <div class="columns is-multiline" *ngIf="actors">
          <div class="column is-4" *ngFor="let actor of actors; let i = index">
            <div class="card">
              <div class="card-content">
                <a [routerLink]="'' + (i+1)" >{{ actor.name }}</a>
                <figure class="image is-4by3 mt-6">
                  <img src="./assets/img/{{ i + 1 }}.jpg"  alt="">
                </figure>
                <p><br>Height : {{ actor.height }}</p>
                <p>Birth Year : {{ actor.birth_year }}</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  `,
  styles: [
  ]
})
export class ActorListComponent implements OnInit {
  actors;

  constructor(private actorService: ActorService) { }

  async ngOnInit() {
    this.actors = await this.actorService.getActors()
    console.log(this.actors)
  }

}

लेकिन सिंगल पर कि अगर हम पहले एक्टर एक्स को क्लिक करते हैं। ल्यूक स्काईवॉकर मैं छवि बनना चाहता था केवल एक ही दिखाई देता है और इसी तरह। और यह अभिनेता-एकल घटक के लिए है

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { ActorService } from 'src/app/core/services/actor.service';

@Component({
  selector: 'app-actor-single',
  template: `
    <section class="section">
      <div class="container">
        <div class="card" *ngIf="actor">
          <section class="hero is-info">
            <div class="hero-body">
              <h1 class="title is-1 ml-4 mb-6">{{ actor.name }}</h1>
            </div>
          </section>

            
          <div class="message-body" *ngFor=" let i = index">
              <figure class="image is-4by3 mt-6">
                <img src="./assets/img/'{{ i + 1 }}.jpg"  alt="">
              </figure>
            <h2 class="subtitle is-4 ml-6 mb-1 pd-0">Height : {{ actor.height }}</h2>
            <h2 class="subtitle is-4 ml-6 mb-1 pd-0">Mass : {{ actor.mass }}</h2>
            <h2 class="subtitle is-4 ml-6 mb-1 pd-0">Hair Color : {{ actor.hair_color }}</h2>
            <h2 class="subtitle is-4 ml-6 mb-1 pd-0">Skin Color : {{ actor.skin_color }}</h2>
            <h2 class="subtitle is-4 ml-6 mb-1 pd-0">Eye Color : {{ actor.eye_color }}</h2>
            <h2 class="subtitle is-4 ml-6 mb-1 pd-0">Birth Year : {{ actor.birth_year }}</h2>
            <h2 class="subtitle is-4 ml-6 mb-1 pd-0">Gender : {{ actor.gender }}</h2>
            <h2 class="subtitle is-4 ml-6 mb-1 pd-0">Created : {{ actor.created }}</h2>
            <h2 class="subtitle is-4 ml-6 mb-1 pd-0">Edited : {{ actor.edited }}</h2>
            <h2 class="subtitle is-4 ml-6 mb-1 pd-0">Url : {{ actor.url }}</h2>
          </div>
        </div>
      </div>
    </section>
  `,
  styles: [
  ]
})
export class ActorSingleComponent implements OnInit {
actor;
  constructor( private actorService: ActorService, private route: ActivatedRoute) { }

  ngOnInit(): void {

    this.route.params.subscribe(async params => {
      const actorname = params['actorname'];
      this.actor = await this.actorService.getActor(actorname)
      console.log(this.actor)
    });
  }
}
0
Jansen Su 26 सितंबर 2021, 11:57

1 उत्तर

सबसे बढ़िया उत्तर

शायद वह नहीं जो आप चाहते थे, लेकिन एक विचार:

क्या आप अपनी फ़ाइल का नाम अभिनेता के नाम पर रखेंगे?

यदि हाँ, तो आप इसे इस तरह इस्तेमाल कर सकते हैं

<div class="message-body">
  <figure class="image is-4by3 mt-6">
    <img [src]="'./assets/img/' + actor.name + '.jpg'" alt="" />
  </figure>
  <h2 class="subtitle is-4 ml-6 mb-1 pd-0">Height : {{ actor.height }}</h2>
  <h2 class="subtitle is-4 ml-6 mb-1 pd-0">Mass : {{ actor.mass }}</h2>
  <h2 class="subtitle is-4 ml-6 mb-1 pd-0">
    Hair Color : {{ actor.hair_color }}
  </h2>
  <h2 class="subtitle is-4 ml-6 mb-1 pd-0">
    Skin Color : {{ actor.skin_color }}
  </h2>
  <h2 class="subtitle is-4 ml-6 mb-1 pd-0">
    Eye Color : {{ actor.eye_color }}
  </h2>
  <h2 class="subtitle is-4 ml-6 mb-1 pd-0">
    Birth Year : {{ actor.birth_year }}
  </h2>
  <h2 class="subtitle is-4 ml-6 mb-1 pd-0">Gender : {{ actor.gender }}</h2>
  <h2 class="subtitle is-4 ml-6 mb-1 pd-0">Created : {{ actor.created }}</h2>
  <h2 class="subtitle is-4 ml-6 mb-1 pd-0">Edited : {{ actor.edited }}</h2>
  <h2 class="subtitle is-4 ml-6 mb-1 pd-0">Url : {{ actor.url }}</h2>
</div>

एक और युक्ति: टिप्पणी करें कि मैंने कैसे उपयोग किया, [src]="..." कोणीय दुनिया में, यह एक HTML विशेषता के भीतर {{ }} का उपयोग करने के लिए एक बुरा अभ्यास माना जाता है।`

देखा

1
Raphaël Balet 27 सितंबर 2021, 08:57
धन्यवाद कि कोई कर सकता है, लेकिन मैं जो चाहता था वह दूसरा कोड है जिसे ठीक किया जाना है, एकल व्यक्ति एक
 – 
Jansen Su
26 सितंबर 2021, 14:38
वहाँ आप एक अतिरिक्त टिप के साथ हैं;)
 – 
Raphaël Balet
27 सितंबर 2021, 08:57