Angular弹窗加载指定挑战详情异常：点击View按钮显示全部挑战

Hey Jesse, I see the issue here — your current template is looping through the entire challenge_list for every single table row, which is why all challenges are being loaded when you click the View button. Let's fix this by focusing on displaying just the selected challenge instead of the whole list.

Step 1: Pass the Selected Challenge to the Modal Component #

First, make sure when you open the modal from your parent component, you pass the specific challenge the user clicked on. Here's how that might look in your parent component's TypeScript:

// Example parent component code
import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
import { ViewOneChallengeComponent } from './view-one-challenge/view-one-challenge.component';
import { Challenge } from './models/challenge.model'; // Adjust path to your model

constructor(private modalService: NgbModal) {}

openChallengeDetails(selectedChallenge: Challenge) {
  const modalRef = this.modalService.open(ViewOneChallengeComponent);
  modalRef.componentInstance.selectedChallenge = selectedChallenge;
}

Step 2: Add an Input Property to Receive the Selected Challenge #

In your view-one-challenge.component.ts, define an @Input() property to accept the single challenge object:

import { Component, Input } from '@angular/core';
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
import { Challenge } from '../models/challenge.model'; // Adjust path as needed

@Component({
  selector: 'app-view-one-challenge',
  templateUrl: './view-one-challenge.component.html'
})
export class ViewOneChallengeComponent {
  @Input() selectedChallenge: Challenge; // This holds the single selected challenge

  constructor(public activeModal: NgbActiveModal) { }
}

Step 3: Update the Template to Display Only the Selected Challenge #

Remove all the *ngFor directives from your table rows — you don't need to loop through the whole list anymore. Instead, directly bind to the selectedChallenge properties. Here's the corrected template:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="modal-header">
  <h4 class="modal-title">Challenge Details</h4>
  <button type="button" class="close" aria-label="Close" (click)="activeModal.dismiss('Cross click')">
    <span aria-hidden="true">&times;</span>
  </button>
</div>
<div class="modal-body">
  <!-- Table for a single challenge's details -->
  <table class='table table-hover table-responsive table-bordered'>
    <tr>
      <td class="w-40-pct">Name</td>
      <td>{{selectedChallenge?.name}}</td>
    </tr>
    <tr>
      <td>Duration</td>
      <td>{{selectedChallenge?.duration}}</td>
    </tr>
    <tr>
      <td>Description</td>
      <td>{{selectedChallenge?.description}}</td>
    </tr>
    <tr>
      <td>Quiz</td>
      <td>{{selectedChallenge?.Quiz?.title}}</td>
    </tr>
  </table>
</div>
<div class="modal-footer">
  <button type="button" class="btn btn-outline-dark" (click)="activeModal.close('Close click')">Close</button>
</div>

Why This Works #

Your original code was using *ngFor="let challenge of challenge_list" for every table row, which meant each row would render that property for every challenge in the list. By switching to a single selectedChallenge object, we only display the details of the specific challenge the user clicked on. The ?. optional chain operator ensures we don't get errors if any property is null or undefined.

内容的提问来源于stack exchange，提问作者Jesse James