如何在 Angular 8 中的下拉菜单的 select 上生成 table

Question

在我的程序中，我已经使用所有给定的可能值渲染了 table。我只想在 table.

中检索与我的 bookingId 匹配的值

*view.component.ts

     import { Component, OnInit } from '@angular/core';
        import { HttpClient } from '@angular/common/http';
        import { Observable } from 'rxjs';
        import { Booking } from '../booking.model';
        import { ViewService } from './view.service';
        
        @Component({
          selector: 'app-view-component',
          templateUrl: './view-component.component.html',
          styleUrls: ['./view-component.component.css']
        })
        export class ViewComponentComponent implements OnInit {
        
          bookings=[];
          selected: number;
          tableData:any[];
          selectedId:string='';
          constructor(private http: HttpClient, private view: ViewService) { }
        
        
          
          ngOnInit(): void {
            this.getBookings();
           
          }
        
        
          getBookings(): void {
            this.view.getBookings()
            .subscribe((data:any) => {
              this.bookings = data;
              console.log(this.bookings);
            });
          }
        
          onSelected(value:string){
          console.log("the selected value is " + value);
        
          let temp =this.bookings.filter(el=>el.bookingId===value)
          console.log(temp);
          this.bookings=temp
        
         } 
     }

view.component.html

<label for="bookings">
        Select a Booking Id
    </label>
    
    <select class="form-control" id="bookings" #mySelect 
    (change)='onSelected(mySelect.value)'>
    
    <option disabled selected value="">Select an Id</option>
    <option *ngFor="let book of bookings" [value]="book.bookingId">
            {{book.bookingId}}
    </option>
    </select>
    
    <table class="table table-striped" >
        <thead>
            <tr>
                <th>Booking Id</th>
                <th>First Name</th>
                <th>Gender</th>
                <th>Category</th>
                <th>Booking Date</th>
    
            </tr>
        </thead>
        <tbody>
            <tr *ngFor="let book of bookings">
                <td>{{book.bookingId}}</td>
                <td>{{book.guestName}}</td>
                <td>{{book.gender}}</td>
                <td>{{book.categoryName}}</td>
                <td>{{book.bookingDate| date: 'dd/MM/yyyy'}}</td>
            </tr>
        </tbody>
    </table>

问题是 table 在我的应用程序加载时已经生成。我希望它在适当的下拉列表的 select 上生成。下拉列表由预订 ID 填充。谁能给个解决办法

Answer 1

你不应该在 ngOnInit 挂钩中加载预订，你应该在你的 onSelected 事件处理程序中加载它，在您的模板中，您可以 ngIf 加载您的 table 仅当有如下预订时


<table class="table table-striped" *ngIf="bookings.length>0">
    <thead>
        <tr>
            <th>Booking Id</th>
            <th>First Name</th>
            <th>Gender</th>
            <th>Category</th>
            <th>Booking Date</th>

        </tr>
    </thead>
    <tbody>
        <tr *ngFor="let book of bookings">
            <td>{{book.bookingId}}</td>
            <td>{{book.guestName}}</td>
            <td>{{book.gender}}</td>
            <td>{{book.categoryName}}</td>
            <td>{{book.bookingDate| date: 'dd/MM/yyyy'}}</td>
        </tr>
    </tbody>
</table>

Answer 2

您在 HTML 中绑定相同的数组，使用另一个空数组来过滤数据。如果您想在页面呈现时首先加载预订 ID 数据，那么只需在 getBookings()

中获取数据后调用 onSelected(data[0].bookingId)

filtersBookings = [];

onSelected(value:string){
  this.filtersBookings =this.bookings.filter(el=>el.bookingId===value)
} 
    
<tr *ngFor="let book of filtersBookings">
   <td>{{book.bookingId}}</td>
   <td>{{book.guestName}}</td>
   <td>{{book.gender}}</td>
   <td>{{book.categoryName}}</td>
   <td>{{book.bookingDate| date: 'dd/MM/yyyy'}}</td>
</tr>

如何在 Angular 8 中的下拉菜单的 select 上生成 table

How to generate a table on select of a dropdown in Angular 8

arrays

angular

angular8