Я пытаюсь создать базовое приложение на 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">×</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.
Проблема в том, что все ваши модальные окна будут иметь один и тот же статический идентификатор #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>
[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 и, возможно, в этом компоненте сведений, вызывая службу, чтобы получить дополнительную информацию о рецепте и все. Конечно, я представляю вам черновик, но это общая идея. Теперь вам нужно изучить, как открыть модальное окно с компонентом, это зависит от документации о том, какие компоненты пользовательского интерфейса вы выбрали.
Надеюсь, это может вам помочь.