Angular отображение json объекта в таблице html - PullRequest
Новая
       2

Angular отображение json объекта в таблице html

1 голос
/ 20 февраля 2020

Здравствуйте, ребята, у меня есть json данные из пожарного магазина, и я хочу отобразить эти данные в таблице html.

Это мой customer-list.component. html

<body>
  <div class="container">
    <div class="title">
      <h3>Customer Table</h3>
    </div>
    <div class="row">
      <div class="col-md-12">
      </div>
      <div class="col-lg-8 col-md-10 ml-auto mr-auto">
        <div class="table-responsive">
          <table class="table">
            <thead>
              <tr>
                <th class="text-center">#</th>
                <th>Name</th>
                <th>Age</th>
                <th>Active</th>
              </tr>
            </thead>
            <tbody>
              <div *ngFor="let customer of customers" style="width: 300px;">
                <app-customer-details [customer]='customer'></app-customer-details>
              </div>
        <div style="margin-top:20px;">
          <button type="button" class="button btn-danger" (click)='deleteCustomers()'>Delete All</button>
        </div>
        </tbody>
        </table>
      </div>
      </div>

Похоже, в этом нет ничего плохого.

Это мой компонент customer-details.com. html

<div *ngIf="customer">
<tr>
   <td>
       <label>First Name: </label> {{customer.name}}
     </td>
     <td>
       <label>Age: </label> {{customer.age}}
     </td>
     <td>
       <label>Active: </label> {{customer.active}}
     </td>
     <span class="button is-small btn-primary" *ngIf='customer.active' (click)='updateActive(false)'>Inactive</span>

     <span class="button is-small btn-primary" *ngIf='!customer.active' (click)='updateActive(true)'>Active</span>

     <span class="button is-small btn-danger" (click)='deleteCustomer()'>Delete</span>
</tr>
</div>

Но вывод моей таблицы: table

Спасибо за ответы.

Ответы [ 3 ]

1 голос
/ 20 февраля 2020

Когда вы посмотрите на дерево DOM, вы обнаружите, что

<tr><app-customer-details>...</app-customer-details</td>

Это не приведет к визуализации компонента в таблице как к, а будет заполнять весь компонент HTML шаблон внутри одного столбца.

Добавив селектор атрибута к компоненту, т.е. селектор: 'app-customer-details, [app-customer-details]', вы можете добавить селектор непосредственно к элементу, как и тогда, и теперь элементы внутри Шаблон компонента HTML будет правильно отображаться внутри таблицы.

Посмотрите на эту ссылку ;

Правильный код следующий: Customer-list.component. html

<div class="container">
    <div class="title">
        <h3>Customer Table</h3>
    </div>
    <div class="row">
        <div class="col-md-12">
        </div>
        <div class="col-lg-8 col-md-10 ml-auto mr-auto">
            <div class="table-responsive">
                <table class="table">
                    <thead>
                        <tr>
                            <!-- <th class="text-center">#</th> -->
                            <th>Name</th>
                            <th>Age</th>
                            <th>Active</th>
                        </tr>
                    </thead>
                    <tbody>
              <tr *ngFor="let customer of customers" [customerDetails]="customer">
              </tr>
                        <div style="margin-top:20px;">
                            <button type="button" class="button btn-danger" (click)='deleteCustomers()'>Delete All</button>
                        </div>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

Customer-details.component. html

<td>
  {{customerDetails.name}}
</td>
<td>
  {{customerDetails.age}}
</td>
<td>
  {{customerDetails.active}}
</td>

Customer-details.component.ts 

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

@Component({
  selector: 'customerDetails, [customerDetails]',
  templateUrl: './customer-details.component.html',
  styleUrls: ['./customer-details.component.css']
})
export class CustomerDetailsComponent implements OnInit {

  @Input() customerDetails: object = {};
  constructor() { }

  ngOnInit() {
  }

}
0 голосов
/ 20 февраля 2020

У вас есть много вещей, которые не будут правильно отображать вашу таблицу: 

<tbody>
  <div *ngFor="let customer of customers" style="width: 300px;">
      <app-customer-details [customer]='customer'>
      </app-customer-details>
   </div>
   ....
</tbody>

Это будет выглядеть так: 

<tbody>
  <div ...>
      <app-customer-details>
       <div> <tr>.....</tr></div>
      </app-customer-details>
   </div>
   ....
</tbody>

Что неверно HTML.

Изменение компонента детализации для использования ng-template: 

<ng-template >
  <tr *ngIf="customer">
    <td><label>First Name: </label> {{customer.name}}</td>
    <td><label>Age: </label> {{customer.age}}</td>
    <td><label>Active: </label> {{customer.active}}</td>
    <td> 
      Note: All spans should also be inside a TD tag
    </td>

  </tr>
</ng-template>
0 голосов
/ 20 февраля 2020

Не ограничивайте ширину клиентского компонента до 300 пикселей, как вы сделали здесь: 

<div *ngFor="let customer of customers" style="width: 300px;">
...