如何在选择选项时在垫选择选项中添加按钮？

Question

我正在尝试在选择垫选择选项旁边添加一个 url 按钮。单击该按钮将打开一个新选项卡，其中包含与该选项相关的信息。我不希望所有选项在垫选择下拉时（即选择它时）都有此按钮。

使用下面的代码，链接出现在下拉列表中并且可以单击，但是当选择一个选项时，按钮不可单击，只显示文本“打开”，没有可见的按钮。

我无法找到解决方案。有人知道我怎样才能做到这一点吗？

<mat-select [formControl]="formControl" (optionSelected)="onSelected($event)">
       <mat-option></mat-option>
       @for (option of options; track option) {
           <mat-option [value]="option.value">
             {{option.key}}
             <button (click)="openLink()">Open<button> <!-- only want this when it is selected -->
           </mat-option>
       }
</mat-select>

Answer 1

注意： 当您选择一个选项时，下拉菜单将立即关闭。因此，即使您在选定的垫选项旁边添加按钮，该按钮也将与垫选项一起不可见。

但是既然你这么说了

不幸的是，我的要求是在所选选项中包含该按钮。

这是代码：

<mat-select
  #my_select
  [formControl]="formControl"
  (optionSelected)="onSelected($event)">
      <mat-option></mat-option>
      @for (option of options; track option) {
          <mat-option [value]="option.value">
            {{option.key}}
          @if(my_select.value === option.value){
            <button (click)="openLink()">Open<button>
          }
          </mat-option>
      }
</mat-select>

说明：
上面的代码使用了一个变量，

#my_select

来引用

mat-select

，还有很多其他方法来引用元素/组件，我选择了这种方法。

您可以通过添加以井号字符 (#) 开头，后跟变量名称的属性来在模板中的元素上声明变量。

参考

然后使用

@if

比较所选选项的值与

mat-option

值，如果相同，则显示 按钮。 但是，您不太可能看到该按钮，因为一旦您选择一个选项，下拉列表就会自动关闭。