修改我的代碼，我想將 select 下拉列表替換為具有自動完成功能的輸入框

Question

因為我是 angular 的菜鳥，所以我真的需要一個指導，比如我應該如何將這個 select 選項下拉列表替換為簡單的輸入框。 I am fetching the data from api, currently I have limited data in my api so its working fine with select option drop down list but my api will contains lots of data so I dont want my users to scroll and search for the data. 相反，我希望他們輸入並獲取 select 該項目。 在這里我分享我的代碼，我實現了 Select 選項下拉方法。 請將我的代碼修改為該輸入框。

1. 元數據-service.service.ts

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import { Pincodes } from 'src/app/Model/Pincodes';
import { baseURL } from 'src/environments/environment';

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

  constructor(private http:HttpClient) { }

  public GetPincodes() : Observable<any> {
    console.log("Calling GetPincodes API")
    return this.http.get("/Metadata/api/metadata/getpincodes") // My API Link
  }

}

2. API 包含以下數據

{
  "program": null,
  "version": null,
  "dateTime": null,
  "success": true,
  "errorCode": null,
  "errorMessage": null,
  "message": "Pincodes read Successfully",
  "data": [
    {
      "pincode": 400708,
      "village": "Airoli",
      "taluka": "Thane",
      "district": "Thane",
      "state": "Maharashtra"
    },
    {
      "pincode": 416007,
      "village": "Kaamba",
      "taluka": "Kalyan",
      "district": "Thane",
      "state": "Maharashtra"
    },
    {
      "pincode": 421102,
      "village": "Atali",
      "taluka": "Kalyan",
      "district": "Thane",
      "state": "Maharashtra"
    },
    {
      "pincode": 421501,
      "village": "Ambarnath",
      "taluka": "Ambarnath",
      "district": "Thane",
      "state": "Maharashtra"
    },
    {
      "pincode": 421503,
      "village": "Ambeshiv",
      "taluka": "Ambarnath",
      "district": "Thane",
      "state": "Maharashtra"
    }
  ]
}

3. Pincode.ts

export class Pincodes {
    pincode : number
    village : string
    taluka : string
    district : string
    state : string
}

4. 注冊頁面.component.ts

import { Component, OnInit } from '@angular/core';
import { Pincodes } from '../classes/pincodes';
import { MetaDataService } from '../services/meta-data.service';
import { FormBuilder, FormControl } from '@angular/forms';
import { Observable } from 'rxjs';

@Component({
  selector: 'app-register-page',
  templateUrl: './register-page.component.html',
  styleUrls: ['./register-page.component.css']
})
export class RegisterPageComponent implements OnInit {
  observeData: Pincodes[]
  modifiedText: any;
  PinSelected: any = {}


  constructor(private _metaDataAPI: MetaDataService) {

  }

  ngOnInit() {
    this._metaDataAPI.getData().subscribe(data => {
      this.observeData = data;
    });

  }

  onPincodeSelected(val: Pincodes) {
    console.log("value" + val);
    this.customFunction(val)

  }
  customFunction(val: Pincodes) {
    // this.modifiedText = "The Selected Pin :  " + val.pincode +
    //  " and selected District is " + val.village
    this.modifiedText = "Selected Pin : " + val.pincode + "\n" +
      "District : " + val.district + "\n" +
      "Taluka : " + val.taluka


    console.log("Modified Text: " + this.modifiedText);
    console.log("Pincode Selected: " + this.PinSelected);
    console.log("observeData Selected: " + this.observeData);

  }


}

5. 注冊頁面.component.html

<select
        [(ngModel)]="PinSelected"
        (ngModelChange)="onPincodeSelected($event)"
      >
        <option *ngFor="let pin of observeData" [ngValue]="pin">
          {{ pin.pincode }}
        </option>
      </select>
      <div>
        <p>{{ modifiedText }}</p>
      </div>

修改上面的代碼，我再解釋一次

我想實現自動完成輸入框。 例如，在輸入框中，當我輸入400708時，它應該從 api 中獲取所有數據，例如它的村庄、taluka、區、state。

Answer 1

您可以簡單地使用帶有預輸入功能的 ng-select，按照此處提到的教程進行操作

https://www.freakyjolly.com/ng-select-typeahead-with-debouncetime-fetch-server-response/