使用 abp 和 angular 自动完成

Question

我在ABP项目中有这个API

     public async Task<ListResultDto<CustomerLookupDto>> GetCustomerLookupAsync(string name)
            {
                if( name.IsNullOrEmpty()){}
                var customers = await _customerRepository.GetListAsync(x=>x.Name.Contains(name));
                return new ListResultDto<CustomerLookupDto>(
                    ObjectMapper.Map<List<Customer>, List<CustomerLookupDto>>(customers));
    
            }

我需要在 angular mat-autocomplete 组件中使用它，所以当我开始写客户名称时，它会开始查看包含我输入的字符的客户列表我在 ts 代码中试过这段代码：

    import { Component, OnInit } from '@angular/core';
    import{ CustomerLookupDto, WorkorderService } from '@proxy/workorders'
    
    import {
      MAT_DIALOG_DATA,
      MAT_DIALOG_DEFAULT_OPTIONS,
    } from "@angular/material/dialog";
    import { FormControl, FormBuilder, FormGroup, Validators } from '@angular/forms';
    import{workorderTypeOptions} from '@proxy/workorder-types'
    import { Observable } from 'rxjs';
    import { CustomerDto } from '@proxy/customers';
    import { map } from 'rxjs/operators';
    import { DateAdapter } from '@angular/material/core';
    @Component({
      selector: 'app-workorder-dialog',
      templateUrl: './workorder-dialog.component.html',
      styleUrls: ['./workorder-dialog.component.scss'],
      providers: [
        {
          provide: MAT_DIALOG_DEFAULT_OPTIONS,
          useValue: { hasBackdrop: true, width: "50vw" },
        },
    
      ],
    })
    export class WorkorderDialogComponent implements OnInit {
      form: FormGroup;
    workorderTypes=workorderTypeOptions;
    customers$:Observable<CustomerLookupDto[]>;
    filteredCustomers:Observable<CustomerLookupDto[]>;
    public myControl: FormControl;
     
    constructor(private fb:FormBuilder,workorderService:WorkorderService) { 
      this.myControl = new FormControl();
      this.filteredCustomers = workorderService.getCustomerLookup(this.myControl.valueChanges.subscribe(x=>{})).pipe(map((r) => r.items));
    
    
    }
    
      ngOnInit(): void {
        this.buildForm();
      }
    
      buildForm() {
        this.form = this.fb.group({
          complaint: [null, Validators.required],
          workorderType: [null, Validators.required],
          customerId: [null, Validators.required],    
            deadLine: [null, Validators.required]
    
        });
      }
    
      getFormValue() {
        return {
          ...this.form.value,
        
        
        };
    
      }
    
    }

这是 html 代码：

<h2 mat-dialog-title>{{ '::NewWorkorder' | abpLocalization }}</h2>
<mat-dialog-content>
  <form [formGroup]="form" class="form-container">
    <mat-form-field class="w-100">
      <mat-label>{{'::Complaint' | abpLocalization}} <span> * </span></mat-label>
      <input type="text" id="workorder-complaint" matInput formControlName="complaint" />
    </mat-form-field>

  

    <mat-form-field class="w-100">
      <mat-label>{{'::Type' | abpLocalization}}<span> * </span></mat-label>
      <mat-select id="workorder-type" formControlName="workorderType">
        <mat-option [value]="workorderType.value" *ngFor="let workorderType of workorderTypes"
          >{{ '::Enum:WorkorderType:' + workorderType.value | abpLocalization }}</mat-option
        >
      </mat-select>
    </mat-form-field>

   
    <mat-form-field>
      <mat-label>{{'::Customer' | abpLocalization}}<span> * </span></mat-label>

        <input type="text" formControlName="customerId"  ngDefaultControl   matInput [formControl]="myControl" [matAutocomplete]="auto">
      </mat-form-field>
  
      <mat-autocomplete   #auto="matAutocomplete">
        <mat-option *ngFor="let n of filteredCustomers$ | async" [value]="n.id">
          {{n.name}}
        </mat-option>
      </mat-autocomplete> 
      <mat-form-field class="w-100">
    
        <mat-label
          >{{'::DeadLine' | abpLocalization}} <span> * </span></mat-label
        >
        <input matInput [matDatepicker]="picker"  formControlName="deadLine" />
        <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
        <mat-datepicker #picker></mat-datepicker>
      </mat-form-field>
      

  </form>
  
  
</mat-dialog-content>


<mat-dialog-actions>
  <button mat-button mat-dialog-close>{{ '::Close' | abpLocalization }}</button>
  <button mat-raised-button color="primary" [mat-dialog-close]="getFormValue()">
    {{'::Save' | abpLocalization}}
  </button>
</mat-dialog-actions>

但它不起作用 mat-autocomplete 中显示的任何内容像这样：

Answer 1

在 ts 文件中添加此代码：

 onChange(text){
   this.customers$= this.workorderService.getCustomerLookup(text).pipe((map(r=>r.items)));
  }

在 Html 中为您的输入添加 (change)="onChange(myInput.value)"，如下面的代码

<mat-form-field>
      <mat-label>{{'::Customer' | abpLocalization}}<span> * </span></mat-label>

        <input type="text"  formControlName="customerId"  ngDefaultControl (input)="onChange(myInput.value)" (change)="onChange(myInput.value)" #myInput   matInput [formControl]="myControl" [matAutocomplete]="auto" >
      </mat-form-field>
  
      <mat-autocomplete   #auto="matAutocomplete">
        <mat-option *ngFor="let n of customers$ | async" [value]="n.id">
          {{n.name}}
        </mat-option>
      </mat-autocomplete>

使用 abp 和 angular 自动完成

autocomplete using abp and angular

angular

abp