通過Angular中的下拉串列過濾

這是我的問題的一個小例子。我有一個帶有元素的 HTML 表格和一個下拉串列

在此處輸入影像描述

如果用戶單擊，則顯示in所有型別的記錄in

在此處輸入影像描述

我不知道該怎么做，但是在搜索互聯網時，我遇到了這個頁面。

當我選擇時in，我的 HTML 表變為空，它不獲取記錄。你知道為什么嗎？

服務.ts

@Injectable({
    providedIn: 'root'
})
export class CorporateActionService {

    startDate = new Date("");

    prea = [{
            num: "758-1184511-34",
            svm: "000902988",
            type: "in",
            quantity: "12,00",
            isin: "BE0003470755",
            title: "SOLVAY BE",
        },
        {
            num: "758-1184511-34",
            svm: "000902987",
            type: "out",
            quantity: "11,25",
            isin: "BE0152676954",
            title: "AXA B FD EQUITY BELGIUM",
        },

    ]

    dataList = [{
            code: 1,
            name: "in"
        },
        {
            code: 2,
            name: "out"
        },
    ]

    constructor() {}
}

組件.ts

export class CorporateActionComponent implements OnInit {

    prea: any;
    dataList: any;
    brandName = {};


    constructor(private service: CorporateActionService) {}

    ngOnInit(): void {
        this.prea = this.service.prea;
        this.dataList = this.service.dataList;
        this.brandName = this.dataList.brandName;
    }

    public selectedBrand: any;
    public valueSelected() {
        this.prea = this.service.prea.filter(
            item => item.num === this.selectedBrand
        );
    }

}

組件.html

<div class="home-content container ">
   <h1 class="text-center pt-5 pb-3">Corporate Action</h1>
   <div class="row pt-3 container">
      <div class="card" style="width: 100%;">
         <div class="card-body">
            <div class="text-end">
               <select [(ngModel)]="selectedBrand" (change)="valueSelected()">
               <option>Select</option>
               <option *ngFor="let item of dataList;let i = index" value="{{item.code}}" [selected]="i == 0">
               {{item.name}}
               </option>
               </select>
            </div>
            <table class="table table-striped table-hover">
               <thead class="thead-light">
                  <tr class="text-center">
                     <th scope="col">Client</th>
                     <th scope="col">N° de préavis</th>
                     <th scope="col">Type</th>
                     <th scope="col">Quantité</th>
                     <th scope="col">ISIN</th>
                     <th scope="col">Titre</th>
                  </tr>
               </thead>
               <tbody>
                  <tr *ngFor="let line of prea">
                     <td scope="row" class="text-center">{{ line.num }}</td>
                     <td scope="row" class="text-center">{{ line.svm }}</td>
                     <td scope="row" class="text-center">{{ line.type }}</td>
                     <td scope="row" class="text-center">{{ line.quantity }}</td>
                     <td scope="row" class="text-center">{{ line.isin }}</td>
                     <td scope="row" class="text-center">{{ line.title }}</td>
                  </tr>
               </tbody>
            </table>
         </div>
      </div>
   </div>
</div>

這是一個復制品。

uj5u.com熱心網友回復：

兩件事情：

將選項的值更改為，item.name因為這就是您識別它們的方式

<option *ngFor="let item of dataList;let i = index" value="{{item.name}}" [selected]="i == 0">

并過濾陣列，type因為那是您的in和out屬性所在的位置。

  public valueSelected() {
    this.prea = this.service.prea.filter(
      (item) => item.type === this.selectedBrand
    );
  }

https://stackblitz.com/edit/github-jvrg8t-npq79e?file=src/app/views/dashboard/views/administration/views/corporate-action/corporate-action.component.ts

標籤：javascript 有角度的 打字稿

上一篇：如何等待帶有承諾的回圈完成以執行方法？

下一篇：這兩個片段是否回傳相同的值？