Angular : how to add dynamic options in ngb-dropdown-CodePudding

I am using ngb-dropdown to show dropdown list in my application I have scenario where I need to make a API call to get and show the dropdown items

I am trying to add options dynamically using *ngFor but seems that its not working

Can anyone help with the right way to achieve this?

Below is the sample code

      <div ngbDropdown >
        <button  (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 file

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

CodePudding user response：

Use let of instead on let in

*ngFor="let document of documents"

CodePudding user response：

a *ngFor iterate over arrays. You can use pipe async to "iterate" over a observable that return an array

    <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(....)
    }