Mam szablon jak poniżej:

<div *ngFor="let x of inputs">
  <input type="text" list="datalist" name="datalist">
    <datalist id="datalist">
      <option *ngFor = "let i of dataListOptions" [value]="i">{{i-1}}</option>
    </datalist>
</div>

I plik TS w ten sposób:

import {Component, OnInit} from '@angular/core';

@Component({
  selector: 'app-example',
  templateUrl: './example.component.html',
  styleUrls: ['./example.component.css']
})
export class ExampleComponent implements OnInit {

  dataListOptions: any[] = [1, 2, 3, 4, 5, 6];

  constructor() {
  }

  ngOnInit() {
     this.dataListOptions.push(123);
  }
}

Kiedy zaktualizuję DataListoptions w NGGGIT () lub po aktualizowaniu DOM, jak widać nowe opcje, ale kiedy kliknął na elemencie wejściowym nadal nie widzę nowo włożonej danych tablicy.

Próbowałem użyć zmienionegoTectorref po aktualizacji, ale nadal nie ma szczęścia.

Moje pytanie polega na tym, że należy zrobić, aby opcje dodane po widocznym definicji DataListoptions. Widzę ich, gdy sprawdzam widok, ale nie widzę ich w "rozwijanym"

enter image description here

enter image description here

--- Aktualizacja ---

Właśnie zdałem sobie sprawę, że przykładomomponent implementuje ControlValueAccessor. Nie mam pojęcia, dlaczego został dodany ani jak to działa, więc muszę zrobić więcej dochodzeń, ponieważ wygląda na to, że jest to w jakiś sposób zaktualizowanie wyświetlacza lub domeny

--- Aktualizacja ---

Wejście jest w pętli

4
FourtyTwo 20 luty 2019, 11:08

2 odpowiedzi

Najlepsza odpowiedź

Nie jestem pewien, dlaczego wyświetlacz nie jest zgodny z kontrolowanym elementem, ale wszystko, co musiałem zrobić, to dodać [attr.list]="'datalist'+x" do datalist i sprawiają, że każdy identyfikator elementu jest wyjątkowy.

 <div *ngFor="let x of inputs">
  <input type="text" [attr.list]="'datalist'+x" id="input{{x}}" name="input{{x}}">
    <datalist id="datalist{{x}}">
      <option *ngFor = "let i of dataListOptions" [value]="i">{{i-1}}</option>
    </datalist>
</div>
1
FourtyTwo 20 luty 2019, 13:31

Dzieje się tak, ponieważ masz tablicę inicjalizacją z wartością i kątową nie można wykryć najpóźniej

Spróbuj opróżnić tablicę i uzupełnij go ponownie

import {Component, OnInit} from '@angular/core';

@Component({
  selector: 'app-example',
  templateUrl: './example.component.html',
  styleUrls: ['./example.component.css']
})
export class ExampleComponent implements OnInit {

  dataListOptions: any[] = [1, 2, 3, 4, 5, 6];

  constructor() {
  }

  ngOnInit() {
          this.dataListOptions=[]; // this is main part of working code
     for (var i =0; i <=6; i++) {
        this.dataListOptions.push(i);
          }
     this.dataListOptions.push(123);
  }
}
-1
paras shah 20 luty 2019, 09:25