如何在Angular中结合TranslateModule使用ng2-completer

Hey there! Let's get your ng2-completer set up to display the tipo field from your backend data—since you're new to Angular, I'll break this down step by step.

Step 1: Configure the Data Source in Your Component #

First, you'll need to handle the backend data and tell ng2-completer which field to use for searching and display. We'll use LocalDataProvider (perfect for static/loaded data) and explicitly set the fields tied to your tipo values.

Here's what your component code might look like:

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { LocalDataProvider } from 'ng2-completer';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css']
})
export class YourComponent implements OnInit {
  dataService4: LocalDataProvider;

  constructor(private http: HttpClient) {
    // Initialize the local data provider
    this.dataService4 = new LocalDataProvider();
  }

  ngOnInit(): void {
    // Fetch data from your backend
    this.http.get<any[]>('your-backend-api-url').subscribe(backendData => {
      // Pass the raw data to the provider
      this.dataService4.setData(backendData);
      // Tell ng2-completer to search against the 'tipo' field
      this.dataService4.searchFields = 'tipo';
      // Tell ng2-completer to display the 'tipo' field in the dropdown
      this.dataService4.titleField = 'tipo';
    });
  }

  // Optional: Handle selection events if you need the full object
  onCurrencySelected(selectedItem: any) {
    console.log('Selected currency:', selectedItem);
    // This will log the full object, e.g. {id:10, tipo:"EUR"}
  }
}

Step 2: Update Your ng2-completer Template #

Next, adjust your <ng2-completer> tag to reference the field configurations, and add the selection handler if needed:

<ng2-completer 
  #openCloseSelect 
  class="completer-limit" 
  [datasource]="dataService4" 
  [inputClass]="'form-control'" 
  [minSearchLength]="0" 
  [openOnFocus]="false" 
  [placeholder]="'SCEGLI' | translate" 
  [autoHighlight]="true" 
  [selectOnClick]="true"
  [searchFields]="'tipo'"  <!-- Matches the search field we set in the component -->
  [titleField]="'tipo'"    <!-- Matches the display field we set -->
  (selected)="onCurrencySelected($event)"  <!-- Optional selection handler -->
></ng2-completer>

Quick Check: Module Imports #

Make sure you've imported all required modules in your feature module (or app module) to avoid errors:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { HttpClientModule } from '@angular/common/http';
import { Ng2CompleterModule } from 'ng2-completer';
import { TranslateModule } from '@ngx-translate/core';
import { YourComponent } from './your-component.component';

@NgModule({
  declarations: [YourComponent],
  imports: [
    CommonModule,
    HttpClientModule,
    Ng2CompleterModule,
    TranslateModule.forChild() // Adjust based on your Translate setup
  ]
})
export class YourFeatureModule { }

That's it! Now your ng2-completer dropdown will show the EUR and USD values from your backend data, and your translate pipe for the placeholder will keep working as expected.

内容的提问来源于stack exchange，提问作者Melis