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

列表的所有选项的selected属性都是相同的。因此，只要它为真，它就会将下拉列表中的每个选项都设置为selected……这显然是行不通的。

您需要的是将当前路由URL存储在一个属性中，例如currentRoute，然后在您的* ngFor循环中执行以下操作： [selected]="row.value === currentRoute"。

Answer 2

您应该在<select>标签上设置所选项目：

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

在[selected]="selected"中使用*ngFor时，将选择最后一个选项。

Answer 3

您需要使用select的[value]将其绑定到当前路径。

这里是working example

在模板中

<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)
  }
}

将所选状态设置为选项标签

3 个答案: