Блог

У меня такая проблема: у меня есть таблица, в которой отображаются некоторые автомобили и кнопки редактирования / удаления; Я хочу, чтобы каждая строка таблицы была компонентом автомобиля. Вместо

 <tr *ngFor="let car of filteredCars">
  <td> {{car.Brand }}
  ..
  <td> <button> Edit </button> </td>
  <td> <button> Delete </button> </td>
</tr>
  

Мне нужно отобразить свойства car с помощью компонента car.
Итак, я создал свой компонент следующим образом:

 import { Component, Input } from '@angular/core';

@Component({
    selector: 'car-component',
    template: `
        <td> {{Brand}} </td>
        <td> {{Model}} </td>
        <td> {{Power}} </td>
    `
})
export class CarComponent { 
    @Input() CarId: number;
    @Input() Brand: string;
    @Input() Model: string;
    @Input() Power: string;
}
  

Проблема в том, что когда я пытаюсь

  <tr *ngFor="let car of filteredCars">
 <car-component [CarId]="car.CarId" [Brand]="car.Brand" [Model]="car.Model" 
     [Power]="car.Power">
 </car-component>
//buttons
 </tr>
  

Содержимое компонента car отображается в первой ячейке данных строки таблицы:

Я понимаю, что он берет весь компонент car в качестве первого, проблема в том, что мне не удается достичь решения. Я пробовал: используя шаблоны / директиву.

Прежде всего, вам не нужно создавать компонент для just td . Вы можете создать компонент с полным tr , как это

 import { Component, Input } from '@angular/core';

@Component({
  selector: 'car-component',
  template: `
   <tr>
    <td> {{carData.Brand}} </td>
    <td> {{arData.Model}} </td>
    <td> {{arData.CarId}} </td>
   </tr>
 `
 })
export class CarComponent { 
 @Input() carData: any;
}
  

и тогда вы можете использовать свой car component подобный

  <car-component [carData]="car" *ngFor="let car of filteredCars">
 </car-component>