Question

以下是我的问题的示例

sample.component.html

<div class="center">
<div class="form-group" >
<label>Select Country</label>
<select class="form-control">
  <option *ngFor="let o of options">{{o.name}}</option>
</select>  
<button><a [routerLink]="[o.value]">Submit</a></button>
</div>
</div>

sample.component.ts

export class SelectLocationComponent {
selectedOption: string;
options = [
{ name: "All Countries", value: '/allcountries' },
{ name: "India", value: '/india' }
]
}

我希望在routerlink中选择o.value 来自sample.component.ts

Answer 1

像这样在ngmodel内使用routerlink变量

<div class="center">
    <div class="form-group">
        <label>Select Country</label>
        <select class="form-control" [(ngModel)]="selectedOption">
          <option *ngFor="let o of options" [value]="o.value">{{o.name}} 
          </option>
        </select>  
<button><a [routerLink]="selectedOption">Submit</a></button>
{{selectedOption}}
      </div>
</div>

demo

从选择选项的值动态添加按钮的路由链接

1 个答案: