Angular : 如何在 ngb-dropdown 中添加动态选项

Question

我正在使用 ngb-dropdown 在我的应用程序中显示下拉列表我有一个场景，我需要进行 API 调用来获取和显示下拉项目

我正在尝试使用 *ngFor 动态添加选项，但它似乎不起作用

任何人都可以帮助实现这一目标的正确方法吗？

下面是示例代码

<div ngbDropdown class="d-inline-block">
    <button class="btn btn-outline-primary" (click)="$event.stopPropagation()" id="dropdownBasic1" ngbDropdownToggle>Documents</button>
    <div ngbDropdownMenu aria-labelledby="dropdownBasic1">
        <div *ngFor="let document in documents">
    <button ngbDropdownItem>document</button>
        </div>
    </div>
</div>

.ts 文件

@Component({
  selector: 'app-submission-table',
  templateUrl: './submission-table.component.html',
  styleUrls: ['./submission-table.component.scss']
})
export class SubmissionTableComponent{
    documents:[1,2,3];
}

Answer 1

a *ngFor 遍历数组。您可以使用 pipe async 来“迭代”一个 return 数组

的可观察对象

    <div *ngFor="let document in documents$|async">
      <button ngbDropdownItem>document</button>
    </div>

    documents$=this.serviceData.getDocuments();

    //your service will be who call to your API like
    getDocuments():Observable<string[]>{
        return this.httpClient(....)
    }

Answer 2

使用 let of 而不是 let in

*ngFor="let document of documents"

Angular : 如何在 ngb-dropdown 中添加动态选项

Angular : how to add dynamic options in ngb-dropdown

angular-bootstrap

angular