Question

我正在尝试用angular创建一个基本的应用程序，但遇到了以下问题。我有一个组件，列出所有配方，每个配方都有不同的数据。我为每个配方添加了一个按钮，从而打开了一个模态，其中包含该特定对象的附加信息，至少就是计划。现在，无论单击哪个按钮，我总是显示相同的数据。请问一些有关继续操作并始终显示正确数据的提示吗？对于配方2->配方2数据..现在，我正在显示所有其他配方的配方1数据。

以下是组件：

<div class="col my-3">
<div class="card">
    <img [src]="recipe.imagePath" alt="{{ recipe.name }}" class="card-img-top">
    <div class="card-body">
        <h5 class="card-title">{{ recipe.name }}</h5>
        <p class="card-text">{{ recipe.preview }}</p>

        <div class="row">
            <div class="col text-center">
                <button type="button" class="btn btn-outline-primary" data-toggle="modal" data-target="#recipeModal">
                        Read More...
                </button>
            </div>
        </div>

        <div class="modal fade" id="recipeModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h4 class="modal-title">{{ recipe.name }}</h4>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>

                    <div class="modal-body">
                        <p>{{ recipe.description }}</p>
                    </div>

                    <div class="modal-footer">
                        <button type="button" class="btn btn-outline-success">Add to List</button>
                        <button type="button" class="btn btn-outline-warning">Edit</button>
                        <button type="button" class="btn btn-outline-danger">Delete</button>
                    </div>
                </div>
            </div>
        </div>

        <!-- <app-recipe-detail></app-recipe-detail> -->
    </div>
    <div class="card-footer">
            <small class="text-muted">Posted by: Random Name</small>
    </div>
</div>

和打字稿文件：

import { Component, OnInit, Input } from '@angular/core';
import { Recipe } from '../../recipe.model';

@Component({
  selector: 'app-recipe-item',
  templateUrl: './recipe-item.component.html',
  styleUrls: ['./recipe-item.component.css']
})
export class RecipeItemComponent implements OnInit {
    @Input() recipe: Recipe;

  constructor() { }

  ngOnInit() {
  }

}

这是我在列表组件中显示所有配方的方法：

<div class="row">
  <app-recipe-item *ngFor="let recipeItem of recipes" [recipe]="recipeItem"></app-recipe-item>
</div>

谢谢！

Answer 1

问题是，您所有的模态将具有与#recipeModal完全相同的静态ID。

您可以使用ngFor的索引来设置动态ID和目标，如下所示：

*ngFor="let recipe of recipes; let i = index"

然后像这样动态设置每个配方的id属性：

<div class="modal fade" [attr.id]="'recipeModal' + i" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">

[attr.id]="'recipeModal' + i"这部分将为每个配方生成唯一的ID。

最后，对于您的按钮，您还将动态绑定到数据目标：

<button type="button" class="btn btn-outline-primary" data-toggle="modal" [attr.data-target]="'recipeModal' + i">

编辑

这是传递输入信息的方式

向组件添加新输入：@Input() id: number;
传递索引作为每个组件的输入：<app-recipe-item *ngFor="let recipeItem of recipes; let i = index" [id]="i" [recipe]="recipeItem"></app-recipe-item>
编辑传递的索引以引用ts：[attr.data-target]="'recipeModal' + {{id}}" 以及按钮：[attr.data-target]="'recipeModal' + {{id}}"

Answer 2

我看到这样的东西：

在您需要在 .ts 中显示所有食谱的列表组件中，您拥有let recipes = Recipe[]，然后在 .html 中拥有一种<div *ngFor="let recipe of recipes" class="card">可以遍历列表并显示配方，然后单击按钮时，事件(click)="detailsRecipe(recipe)"

此方法detailsRecipe(recipe)可以将detailsRecipeComponent以及可能在此details组件中打开，调用服务以获取有关食谱的更多信息，仅此而已。当然，这是我向您介绍的草稿，但这是总体思路。现在，您需要研究如何使用组件打开模态，这取决于您选择了哪个UI组件的文档。

我希望它能对您有所帮助。

将不同的数据传递到Angular中的组件

2 个答案: