Передача разных данных в компонент в Angular

Я пытаюсь создать базовое приложение на angular, и у меня возникла следующая проблема. У меня есть компонент, в котором я перечисляю все рецепты, которые у меня есть, и каждый рецепт содержит разные данные. Я добавил кнопку к каждому рецепту, которая открывает модальное окно с дополнительной информацией об этом конкретном объекте, по крайней мере, это план. Сейчас я всегда показываю одни и те же данные, независимо от того, какую кнопку я нажимаю. Могу я дать несколько советов, как продолжить и всегда показывать правильные данные? Для данных 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>

Заранее спасибо!

🤔 А знаете ли вы, что...
Фреймворк Angular CLI (Command Line Interface) упрощает создание, развертывание и управление проектами Angular.


1
84
2

Ответы:

Решено

Проблема в том, что все ваши модальные окна будут иметь один и тот же статический идентификатор #recipeModal.

Вы можете установить динамические идентификаторы, а также цели, используя индекс ngFor следующим образом:

*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" приведет к уникальному идентификатору для каждого рецепта.

Наконец, для вашей кнопки вы также должны динамически привязаться к цели данных:

<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}}"

Я вижу вот что:

В вашем компоненте списка, где вам нужно отобразить все свои рецепты в вашем .ts, у вас есть let recipes = Recipe[], тогда в вашем .html у вас будет своего рода <div *ngFor = "let recipe of recipes" class = "card">, чтобы прокрутить ваш список и отобразить рецепт, а затем, когда вы нажмете на свою кнопку, вы ' ве на нем событие (click) = "detailsRecipe(recipe)"

Этот метод detailsRecipe(recipe) может открыть в модале компонент detailsRecipeComponent и, возможно, в этом компоненте сведений, вызывая службу, чтобы получить дополнительную информацию о рецепте и все. Конечно, я представляю вам черновик, но это общая идея. Теперь вам нужно изучить, как открыть модальное окно с компонентом, это зависит от документации о том, какие компоненты пользовательского интерфейса вы выбрали.

Надеюсь, это может вам помочь.