通过 Angular 中的下拉列表进行过滤

Question

Here is a small illustration of my problem. I have an HTML table with elements and a drop down list

enter image description here

If the user clicks on in , all records with type in are displayed

enter image description here

I don't know how to do it but while searching the inte.net I came across this page .

When I select in , my HTML table becomes empty, it doesn't fetch the record. Do you know why?

service.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() {}
}

component.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
        );
    }

}

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

Here is a reproduction .

Answer 1

Two things:

Change the value of the options to item.name since that's how you identify them

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

And filter the array by type since that's where your in and out properties are.

  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