Угловые Строки Таблицы как компонент

Question

Мне нужно прочитать данные из firebase и показать их как компонент, потому что мне нужно показать thead , соответствующий каждому столбцу. Я пробовал несколько разных HTML-решений, но безрезультатно.

Компонент списка html:

        <div class="card">
          <div class="card-header card-header-info">
            <h4 class="card-title">Trailers abroad</h4>
            <p class="card-category">Until {{ todayDate }}</p>
          </div>
          <div class="card-body table-responsive">
            <table class="table table-hover">
              <thead>
                <tr>
                  <th>Make</th>
                  <th>Type</th>
                  <th>Number</th>
                  <th>Action</th>
                </tr>
              </thead>
              <tbody>
                <tr
                  app-trailer
                  *ngFor="let trailer of abroadTrailers"
                  [inputTrailer]="trailer"
                ></tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>

Список компонентов ts:

  export class TrailersListComponent implements OnInit {
  abroadTrailers: Trailer[];
  homeTrailers: Trailer[];
  todayDate;
  myDate;
  user;

  constructor(
    private router: Router,
    public readService: ReadService,
    public loginService: LoginService
  ) {}

  ngOnInit() {
    this.readService.getAbroadTrailers().subscribe(list => {
      this.abroadTrailers = this.readService.processTrailersData(list);
    });

    this.readService.getHomeTrailers().subscribe(list => {
      this.homeTrailers = this.readService.processTrailersData(list);
    });

    this.myDate = new Date();
    this.todayDate = this.dateToString(this.myDate);

    this.loginService.loggedUser.subscribe(currentUser => {
      if (currentUser !== undefined) {
        if (currentUser === null) {
          this.router.navigate(["/login"]);
        } else {
          this.user = currentUser;
        }
      }
    });
  }

  dateToString(date) {
    let month = (date.getMonth() + 1).toString();
    let day = date.getDate().toString();
    const year = date.getFullYear();
    month = month.length < 2 ? "0" + month : month;
    day = day.length < 2 ? "0" + day : day;
    return `${day}/${month}/${year}`;
  }
}

Компонент строки html:

<td>{{ inputTrailer.make }}</td>
<td>{{ inputTrailer.type }}</td>
<td>{{ inputTrailer.number }}</td>
<td class="td-actions">
  <button
    (click)="onSelect()"
    mat-raised-button
    type="button"
    matTooltip="View"
    [matTooltipPosition]="'above'"
    class="btn btn-success btn-link btn-sm btn-just-icon"
  >
    <i class="material-icons">remove_red_eye</i>
  </button>
  <button
    (click)="editTrailer()"
    mat-raised-button
    type="button"
    matTooltip="Edit Task"
    [matTooltipPosition]="'above'"
    class="btn btn-primary btn-link btn-sm btn-just-icon"
  >
    <i class="material-icons">edit</i>
  </button>
  <button
    data-target="#delete_trailer"
    data-toggle="modal"
    mat-raised-button
    type="button"
    matTooltip="Remove"
    [matTooltipPosition]="'above'"
    class="btn btn-danger btn-link btn-sm btn-just-icon"
  >
    <i class="material-icons">close</i>
  </button>
  <div class="modal fade" id="delete_trailer" role="dialog">
    <div class="modal-dialog">
      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">
            &times;
          </button>
        </div>
        <div class="modal-body">
          <p class="textModal">
            Are you sure you want to delete this trailer?
          </p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">
            Cancel
          </button>
          <button
            type="button"
            class="btn btn-danger ml-2"
            data-dismiss="modal"
            (click)="deleteTrailer()"
          >
            Delete
          </button>
        </div>
      </div>
    </div>
  </div>
</td>

Компонент строки ts:

  @Component({
  selector: "[app-trailer]",
  templateUrl: "./trailer.component.html",
  styleUrls: ["./trailer.component.css"]
})
export class TrailerComponent implements OnInit {
  @Input() inputTrailer: Trailer;

  constructor(private router: Router, private deleteService: DeleteService) {}

  ngOnInit() {}

  onSelect() {
    this.router.navigate(["/trailer-preview/", this.inputTrailer.key]);
  }

  deleteTrailer() {
    this.deleteService.deleteTrailer(this.inputTrailer.key);
    this.router.navigate(["/trailers"]);
  }

  editTrailer() {
    this.router.navigate(["/trailer-edit/", this.inputTrailer.key]);
  }
}

Вот как это выглядит сейчас:

Мне нужно показать столбцы заголовка таблицы, соответствующие каждому столбцу строки.

Вот как это выглядит при проверке:

Спасибо!

Answer 1

1. в html компонента списка замените структуру таблицы следующим образом

<table class="table table-hover">
    <thead>
      <tr>
        <th>Make</th>
        <th>Type</th>
        <th>Number</th>
        <th>Action</th>
      </tr>
    </thead>
    <tbody>
        <tr app-trailer *ngFor="let trailer of abroadTrailers" [inputTrailer]="trailer"></tr>
    </tbody>
</table>

в html-компоненте строки удалите теги <tr> и </tr>.

в компоненте строки ts измените это

@Component({
  selector: 'app-trailer',
  ....
})

к этому

@Component({
  selector: '[app-trailer]',
  ....
})

вот простая демонстрация https://stackblitz.com/edit/angular-z45yab