Error in angular autocomplete 4, values are loaded only once

// TypeScript Service
@Injectable()

export class ProductoService {

  url = Constantes.ROOT + '/v1/catalogo/producto';

  constructor(private http: HttpClient) {}
  //Autocompletado
  public searchDescripcion(numeroDocumento: string, descripcion: string): Observable < any[] > {
    return this.http.get < any > (this.url +
      '/searchdescripcion?numeroDocumento=' + numeroDocumento +
      '&descripcion=' + descripcion);
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
// HTML
<div class="card-body table-responsive">
  <table class="table table-stretch">
    <thead class="thead center-align">
      <tr>
        <th style="width: 32%;"><strong>Descripción</strong></th>
      </tr>
    </thead>
    <tbody>
      <tr *ngFor="let productodetalle of comprobanteDetalle; let i = index;" class="center-align">
        <td>
          <form class="productoForm">
            <div>
              <mat-form-field class="input-full-width">
                <input type="text" aria-label="number" placeholder="Descripción de producto" matInput [formControl]="searchTerms[i]" [matAutocomplete]="auto" [(ngModel)]="productodetalle.descripcionProductoServicio" [disabled]="habilitarDescripcionProductoServicio()">
                <mat-autocomplete #auto="matAutocomplete">
                  <mat-option *ngFor="let item of productosBusqueda; let i=index" [value]="item.descripcionCompleta">
                    {{ item.descripcionCompleta }}
                  </mat-option>
                </mat-autocomplete>
              </mat-form-field>
            </div>
          </form>
        </td>
      </tr>
    </tbody>
  </table>
  <button mat-raised-button class="length-button btn-success" #tooltip="matTooltip" matTooltip="Añadir item" matTooltipPosition="right" (click)="agregarItem()" [disabled]="deshabilitadoButtonItem()" style="outline: none;">+ Añadir
                </button>
</div>

// typeScript

export class ModuloConciliadorComponent implements OnInit {
  public productosBusqueda: Array < any > ;
  public searchTerms: FormControl[] = [new FormControl('')];
  public _TAMANO_MINIMO_BUSQUEDA = 8;

  constructor(private router: Router, public dialog: MatDialog,
    private productoService: ProductoService, ) {}


  ngOnInit(): void {
    this.searchDescripconProducto();
  }

  searchDescripconProducto() {
    this.searchTerms[0].valueChanges.pipe(startWith('')).subscribe(descripcionProducto => {
      if (descripcionProducto.length > this._TAMANO_MINIMO_BUSQUEDA) {
        const numeroDocumentoContribuyente = this.numeroDocumentoContribuyente;
        console.log('data enviada: ' + descripcionProducto);
        this.productoService.searchDescripcion(numeroDocumentoContribuyente, descripcionProducto).subscribe(response => {
          this.productosBusqueda = response['data'];
          console.log(JSON.stringify(this.productosBusqueda));
          console.log(this.question + descripcionProducto);
        }, error => {
          console.log('ERROR INTERNO DEL SERVIDOR');
        });
      }
    });
  }

  agregarItem() {
    const nuevaPosicion = this.searchTerms.push(new FormControl(''));
    this.searchTerms[nuevaPosicion - 1].valueChanges.pipe(startWith(''));

    const newAttribute: any = {
      descripcionProductoServicio: '',
    };
    this.comprobanteDetalle.push(newAttribute);
    // const positionew = this.searchTerm.setValue(new FormControl(''));
    console.log(nuevaPosicion);
    console.log(this.searchTerms);
    // this.comprobanteCabecera.comprobantedetallesourcesByIdComprobanteCabeceraSource = this.comprobanteDetalle;
  }
}