使用 bootstrap 在 Angular 中的预先输入弹出窗口底部添加按钮

Question

我正在努力在预先输入的底部添加按钮。像这样的东西：

我尝试了两天，但没有成功。 有人可以帮我吗？ https://stackblitz.com/edit/angular-kjnyqx?file=app%2Ftypeahead-basic.html

不幸的是，网络上几乎没有关于如何实现这一目标的信息。例如，这里：https://ng-bootstrap.github.io/#/components/typeahead/examples没有类似的东西

Answer 1

参考下面的代码，在 Angular 中的选择控件的最后一个选项中添加一个按钮。；

在你的 component.ts 中：

import { Component } from '@angular/core';

@Component({
  selector: 'app-your',
  templateUrl: './your.component.html',
  styleUrls: ['./your.component.css']
})
export class YourComponent {
  options = ['Option 1', 'Option 2', 'Option 3']; // assuming option to render

 handleButtonClick() {
   
   console.log('Button clicked for the last option'); // Handle button click logic here
  }
}

在组件.html中：

<select>
  <option *ngFor="let option of options; let last = last" [value]="option">
    {{ option }}
    <!-- Add a button for the last option -->
    <ng-container *ngIf="last">
      <button (click)="handleButtonClick()">Click Me</button>
    </ng-container>
  </option>
</select>