OK, dzięki, @froziu, to wygląda sensownie. Będę musiał poczytać w takim razie o tych nawiasach prostokątnych.
Ale nie jestem pewien, jak to rozwiązanie wykorzystać dla mojego przypadku użycia. Docelowo przechowuję indeks w zmiennej (obiekt jest bardziej złożony, ale to nie ma znaczenia), powiedzmy: const initialSelectedIndex = 2
, a nie mam wartości true/false. Żeby wykorzystać Twoje rozwiązanie, musiałbym mapować powyższe options
na przykład w taki sposób:
options.map((e, i) => { return { name: e, selected: i === initialSelectedIndex } });
I to mapowanie umieszczam w pliku app.component.ts
. I to działa. Tutaj jak to zrobiłem:
app.component.html:
<select>
<option *ngFor="let option of mappedOptions" [selected]="option.selected">
{{ option.name }}
</option>
</select>
app.component.ts:
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
options = [
"apple",
"banana",
"cucumber"
];
initialSelectedIndex = 2;
mappedOptions = this.options.map((e, i) => { return { name: e, selected: i === this.initialSelectedIndex } });
}
Ale miałbym dwa pytania:
- Dlaczego zmienna
option
istnieje w [selected]
? Przecież została zdefiniowana w *ngfor
.
- Czy można jakoś ładniej to zrobić? Tworzenie dodatkowego pola klasy komponentu (jak ja zrobiłem) nie wydaje mi się odpowiednie w tym przypadku, tym bardziej umieszczanie mapowania bezpośrednio w
*ngFor
...
UPDATE:
Poczytałem sobie o property binding w Angularze i teraz tak zrobiłem:
app.component.html:
<select>
<option *ngFor="let option of options" [selected]="initialSelectedIndex">
{{ option }}
</option>
</select>
app.component.ts:
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
options = [
"apple",
"banana",
"cucumber"
];
initialSelectedIndex = 2;
}
Jakkolwiek moje powyższe dwa pytania pozostają aktualne, to chyba obecnie to mi wystarczy w praktyce (skoro działa).
UPDATE: W zasadzie jedno pytanie, to o działanie zmiennej option
; powyższy mój sposób jest już "wystarczająco-ładniejszy" od poprzedniego.