Javascript 将动态查询参数传递给锚标记

我有以下代码

<ng-template #listItem let-itemData="data">
<div class="overlay-card">
<div class="card-header">
  <span class="card-header-text"><i class="fas fa-user"></i></span>
  <h3>{{ itemData.name }}</h3>
</div>
<div class="card-body">
  <div class="card-body-text" *ngFor="let item of itemData.dataList">
    <a [routerLink]="['/users']"
      [queryParams]="{organizationId: item.organizationId, organizationName: item.organizationName, userId: item.id}"
      [innerHTML]="item.name | highlight: searchText">{{ item.name }}</a>
  </div>
</div>
<div class="card-footer">
  <div class="button-container" *ngIf="formattedSearchData.users.length !== searchData?.users.length && formattedSearchData.users.length > 0"
    (click)="loadMoreSearchData('users')">
    <span class="load-button-text">Load</span> <span class="footer-number">({{ searchData?.users.length -
      formattedSearchData.users.length }})</span>
  </div>
</div>
</ng-template>

{{itemData.name}
{{item.name}
加载（{{searchData？.users.length-
formattedSearchData.users.length}）

我的问题在第二部分

<a [routerLink]="['/users']"
  [queryParams]="{organizationId: item.organizationId, organizationName: item.organizationName, userId: item.id}"
  [innerHTML]="item.name | highlight: searchText">{{ item.name }}</a>

{{item.name}

我可以传递动态[queryParams]之类的消息吗

<a [routerLink]="{someDynamicValue}"
  [queryParams]="{organizationId: item.organizationId, organizationName: item.organizationName, {someDynamicValue}: item.id}"
  [innerHTML]="item.name | highlight: searchText">{{ item.name }}</a>

{{item.name}

---

注意我需要动态值的地方，如果可能的话，注意如何使用。

我认为您需要将查询参数的生成从模板中移出，如下所示：

this.someDynamicValue = 'user';
this.queryParamString = {
  organizationId: 'organization.id',
  organizationName: 'your own org name',
  [this.someDynamicValue]: 1,
};

然后在模板中：

<a [routerLink]="someDynamicValue"
  [queryParams]="queryParamString"
  [innerHTML]="item.name | highlight: searchText">{{ item.name }}</a>

{{item.name}