Member 12214576 Ответов: 0

Как показать список строк начинающихся с одного и того же алфавита когда я нажимаю на ссылку есть этот алфавит в angular 9

У меня есть массив объектов из API, которые я хочу, когда нажимаю на ссылку ex: Б, Я хочу, чтобы он отображал все строки, начинающиеся с "B". Я новичок в angular, поэтому не знаю, как это сделать.

Что я уже пробовал:

import { Component, OnInit } from '@angular/core';
import {DrugapiService} from '../drugapi.service';


@Component({
  selector: 'app-drug',
  templateUrl: './drug.component.html',
  styleUrls: ['./drug.component.scss']
})


export class DrugComponent implements OnInit {
  DrugNames:any;
  constructor(public _DrugapiService:DrugapiService) {

    _DrugapiService.getDrugName().subscribe((data)=>{
        this.DrugNames=data;
        console.log(this.DrugNames);
    },
    (err)=>{console.log(err)});
  }

  ngOnInit(): void {
  }

  alphbet=['a','b','c','d','e','f','g','h','i','j','k','l','m','n',
          'o','p','q','r','s','t','u','v','w','x','y','z'];

  match:any;
    medcineName:any;
  compareChar(i){
    for(let name of this.DrugNames){
      this.medcineName=name.medicine_name;
      console.log(this.medcineName); //until here working fine and display all names
    } 
    if(this.medcineName.charAt(0)===i){//but from here to the end not working and i'm also not sure of this code
      this.match=this.DrugNames;
      console.log(this.match);
      return this.match;
      // i was thinking here to return a html code like `<div *ngFor='let i of match' >{{i}}</div>`  but i don't think this is the right way i should do
    }
    else {
      return 'not Exist';
    }
  }

}




вот HTML код
<pre><div class="alphabet my-5 text-center">
    <h2 class="mb-5">Drug List From [A-Z]</h2>
    <span *ngFor='let i of alphbet ' class="ml-3 p-2">
        <a class="d-inline" routerLink='/drug' (click)="compareChar(this.i)">{{i}}</a>
    </span>
</div>

//here display all of them and i want to do something like that in a
<div *ngFor="let name of DrugNames">
    <h5 class="p-3">{{name.medicine_name}}</h5>
</div>

		    
                    

                    
                

                

                                    

            

            

                

                    
0 Ответов