Мобильная версияЯ работаю над приложением Angular, в котором у меня есть родительский компонент (HomeComponent), который отображает таблицу с дочерними компонентами (TableEntriesComponent) в каждой строке. Однако я столкнулся с проблемой, когда все дочерние компоненты отображаются в первом столбце, а не в соответствующих столбцах.
Вот упрощенная версия кода:
HomeComponent:
HTML
Домашняя страница Имя:
Электронная почта:
Сообщение:
# Имя Электронная почта Сообщение Удалить TypeScript
import {Component, OnInit } из '@angular/core'; импортировать { ConstantPool } из '@angular/compiler'; @Компонент({ селектор: 'app-home', templateUrl: './home.comComponent.html', styleUrls: ['./home.comComponent.css'] }) класс экспорта HomeComponent реализует OnInit { имя: строка = ''; электронная почта:string=''; сообщение: строка = ''; Исправлено:boolean=false; Сообщения:Array=[]; onDelete (индекс: номер): void { // Обработка логики удаления для указанного индекса this.Messages.splice(индекс, 1); } OnSubmit():недействительно { this.Issubmited = true; это.Сообщения.push( { «Имя»: это.имя, «Электронная почта»: this.email, «Сообщение»: this.message }); } конструктор() { } ngOnInit() { } } CSS
тело { семейство шрифтов: Arial, без засечек; цвет фона: #f4f4f4; маржа: 0; заполнение: 0; дисплей: гибкий; выровнять-элементы: по центру; оправдание-содержание: центр; высота: 100вх; } форма { цвет фона: #fff; отступ: 20 пикселей; радиус границы: 8 пикселей; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); } этикетка { дисплей: блок; нижнее поле: 8 пикселей; } вход, текстовая область { ширина: 100%; отступ: 8 пикселей; поле внизу: 16 пикселей; размер коробки: граница-коробка; граница: 1 пиксель, сплошная #ccc; радиус границы: 4 пикселя; } ввод[тип="отправить"] { цвет фона: #4caf50; цвет: #fff; курсор: указатель; } input[type="submit"]:hover { цвет фона: #45a049; } #SubmitValue { цвет фона: светло-коралловый; дисплей: блок; ширина: 50%; отступ: 10 пт; поле: 10 пт; радиус границы: 20pt; белый цвет; семейство шрифтов: Verdana, Женева, Тахома, без засечек; начертание шрифта: жирный } стол { ширина: 100%; граница-коллапс: коллапс; поле внизу: 20 пикселей; } й, тд { граница: 1 пиксель, сплошная #ddd; отступ: 8 пикселей; выравнивание текста: по левому краю; } й { цвет фона: #f2f2f2; } Дочерний компонент:
HTML
{{Index+1}} {{Имя}} {{Электронная почта}} {{Сообщение}} Удалить Машинопись
import {Input, Output, Component, OnInit, EventEmitter } из '@angular/core'; @Компонент({ селектор: 'app-table-entries', templateUrl: './table-entries.comComponent.html', styleUrls: ['./table-entries.comComponent.css'] }) класс экспорта TableEntriesComponent реализует OnInit { @Input() Индекс: число; @Input() Имя: строка; @Input() Электронная почта: строка; @Input() Сообщение: строка; @Output() onDelete: EventEmitter = новый EventEmitter(); handleDelete(): void { this.onDelete.emit(this.Index); } конструктор() { } ngOnInit() { } } В HTML-коде родительского компонента у меня есть таблица с дочерними компонентами в каждой строке. Однако все дочерние компоненты отображаются в первом столбце. Я ожидал, что каждый дочерний компонент будет находиться в соответствующем столбце.
Не могли бы вы просмотреть мой код и подсказать, в чем может быть причина этой проблемы? Я что-то упустил в шаблоне или логике компонента?
Будем очень признательны за любую помощь или рекомендации. Спасибо!
В НАСТОЯЩЕЕ ВРЕМЯ ИДЕТ
Ожидаемый результат ниже
