将数据加载到弹出窗口中

Question

这个想法是在用户单击按钮视图时仅显示相应挑战的详细信息：

到目前为止，我只能在单击按钮 view 时加载所有 challenges：

这是可以理解的，因为在我的 view-one-challenge.component.html 中，我是这样编码的：

<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">
        <!-- HTML table for displaying a challenge details -->
        <table class='table table-hover table-responsive table-bordered'>

            <tr *ngFor="let challenge of challenge_list">
                <td class="w-40-pct">Name</td>
                <td>{{challenge?.name}}</td>
            </tr>

            <tr *ngFor="let challenge of challenge_list">
                <td>Duration</td>
                <td>{{challenge?.duration}}</td>
            </tr>

            <tr *ngFor="let challenge of challenge_list">
                <td>Description</td>
                <td>{{challenge?.description}}</td>
            </tr>

            <tr *ngFor="let challenge of challenge_list">
                <td>Quiz</td>
                <td>{{challenge?.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>

challenge_list 包含我通过challengeService 从我的 REST API 获得的所有挑战，以下是我用数据填充它的方式：

  ngOnInit() {
        console.log("inside ngOnInit...");
    this.challengeService.getChallenges().subscribe(
      data => {
        this.challenge_list = data;
      },
      error => {
        this.alertService.error(error);
      });
  }

从 REST API 获取数据的方法称为getChallenges()，通过 HttpClient 获取数据：

getChallenges(): Observable<Challenge[]> {
  console.log("inside getChallenges ===============");
    return this.http.get<Challenge[]>(this._challengeUrl);
}

我想做的是，我不想每次点击按钮view 时都加载所有挑战，我只想显示与被点击挑战的id相对应的数据。

很显然，我需要创建一个方法，该方法将 id:number 作为参数，遍历所有挑战并返回具有相应id 的挑战。但是，由于我对 Angular 有点陌生，所以我不知道该怎么做。任何想法甚至提示都将不胜感激。

另外，我认为我没有以优雅的方式加载数据，因为我第二次使用 challengeService 从 REST API 获取数据。有没有一种方法可以简单地将第一张图片（和另一个组件）中显示的数据“复制”或“使用”或“传输”或“注入”到我的弹出窗口中，而无需调用 API？提前谢谢各位。

Answer 1

最好的方法是使用不同的 HTML 标记： 使用 ngFor 遍历 challenge_list 并分别创建每个元素：

<div class="modal-body">
    <!-- HTML table for displaying a challenge details -->
    <table *ngIf="challenge_list != null" class='table table-hover table-responsive table-bordered'>
        <tbody>
            <tr>
                <th>Name</th>
                <th>Duration</th>
                <th>Description</th>
                <th>Quiz</th>
                <th>Actions</th>
                <th>&nbsp;</th>
                <th>&nbsp;</th>
            </tr>
            <tr *ngFor="let campaign of campaigns; let i = index">
                <td>{{challenge?.name}}</td>
                <td>{{challenge?.duration}}</td>
                <td>{{challenge?.description}}</td>
                <td>{{challenge?.Quiz.title}}</td>
                <td>
                    <!-- TODO: Add routerLink -->
                    <a (click)="viewDialog(challenge)">View</a>
                    <a (click)="openEdit(challenge)">View</a>
                    <a (click)="openDelete(challenge)">View</a>
                </td>
            </tr>
        </tbody>
    </table>
</div>

这样，每次调用 viewDialog() 函数时，您都会将整个挑战对象作为输入。然后你需要在组件中创建一个 viewDialog() 函数来显示对话框或重新渲染它。

Answer 2

您可以将 ID 传递给您的组件，您可以通过 Input 在弹出窗口中获取它，例如

@Input() exampleId: number; 

然后你像这样传递它：

<app-popup [exampleId]="theIdYouWantToPass"></app-popup>

然后只需调用该方法并循环遍历内部的所有内容：

forEach(const s of yourArray) {
  if(s.id == exampleId) {..}
}

希望对你有帮助。

编辑：你可以像这样传递任何数据，整个列表，所以你不必调用 api