Angular8のドロップダウンを選択してテーブルを生成する方法

bugfix> arrays > 投稿

私のプログラムでは、指定されたすべての可能な値でテーブルが既にレンダリングされています。テーブル内の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>

問題は、アプリケーションがロードされるまでにテーブルがすでに生成されていることです。適切なドロップダウンを選択すると生成されます。ドロップダウンには予約IDが表示されます。誰かが解決策を与えることができますか

arrays

angular

angular8

回答 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>

  • 予約をngOnInitフックにロードしないでください。onSelectedイベントハンドラー、 そしてあなたのテンプレートで、あなたはあなたのことができますngIf次のような予約がある場合にのみテーブルをロードします

    
<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>

あなたの答え

関連記事