Установить выбранный статус для тега опции

Question

У меня проблема с установкой выбранного статуса для тега опции в угловых.То, что я действительно хочу, - это когда пользователь обновляет параметр окна, который должен быть выбран как URL по умолчанию.Вот фрагмент кода:

<div class="row mb-4">
  <div class="col-12">
    <select (change)="navigateTo($event.target.value)">
      <option
        *ngFor="let row of routes"
        [value]="row.value"
        [selected]="selected"
      >
      {{ 'khanbankCpmsApp.project.'+row.name | translate }}
      </option>
    </select>
  </div>
</div>

В моем файле .ts:

selected: boolean = false;
navigateTo(valueUrl) {
  if (valueUrl) {
    this.router.navigate([valueUrl], {relativeTo: this.activatedRoute});
    this.selected = !this.selected;
  }
  return false;
}

Что я сделал не так?любой совет?

Answer 1

Вы должны установить выбранный элемент на <select> тег:

<select (change)="navigateTo($event.target.value)" [value]="selectedItem">

при использовании [selected]="selected" в *ngFor выберет последний вариант.

Answer 2

Вам нужно использовать [value] для выбора, чтобы привязать его к текущему пути.

Вот рабочий пример

В шаблоне

<select (change)="navigateTo($event.target.value)" [value]="getPath() | async">
  <option
    *ngFor="let row of routes"
    [value]="row.value"
  >
    {{ row.name }}
  </option>
</select>

и в компоненте

@Component({
  templateUrl: './page.component.html',
  styles: [``]
})
export class PageComponent  {
  routes = [
    { name: 'A', value: '/a' },
    { name: 'B', value: '/b' },
    { name: 'C', value: '/c/a/b' }
  ];

  constructor(
    public route: ActivatedRoute,
    public router: Router,
  ) {}

  getPath() {
    return this.route.url.pipe(
      map(parts => '/' + parts.map(({ path }) => path).join('/')),
      filter((path) => path.length > 1), // ignore default empty path remove this and next line if you have routing correctly set up
      startWith(this.routes[0].value), // some startup value if you didn't setup routing
    )
  }

  navigateTo(path) {
    this.router.navigateByUrl(path)
  }
}

Answer 3

Ваше свойство selected одинаково для всех параметров списка. Поэтому всякий раз, когда это правда, он устанавливает выбранные для каждого параметра в раскрывающемся списке ... Это, очевидно, не будет работать.

Вам нужно вместо этого сохранить текущий URL-адрес маршрута в свойстве, скажем currentRoute, а затем в цикле * ngFor сделать что-то вроде: [selected]="row.value === currentRoute".