代码之家 › 专栏 › 技术社区 › dragi

将不同的数据以角度传递给组件

components angular

dragi · 技术社区 · 6 年前

请告诉我一些如何继续并始终显示正确数据的提示好吗?对于recipe2->recipe2数据。。现在我显示所有其他配方的配方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>

提前谢谢!

2 回复 | 直到 6 年前

abdullahkady 6 年前

问题是,所有的情态动词都有相同的静态id #recipeModal .

您可以使用ngFor的索引设置动态id和目标,如下所示:

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

<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]=“往复式”+{{id}”

Arigui Ahmed 6 年前

在您的列表组件中,您需要在你有你的 let recipes = Recipe[] 然后在你的 .html文件 <div *ngFor="let recipe of recipes" class="card"> (click)="detailsRecipe(recipe)"

这种方法 detailsRecipe(recipe)

我希望它能帮助你。