How to dynamically load ion-options from array?

1
votes

I have a service to load and save templates and want that when I click the ion-select the options are dynamically loaded so that every saved template is an option instead of hardcoded options.

I tried using an NgFor and creating an instance of the service that handles the templates in the JS file.

Here is the HTML code 

```
<ion-item>
    <ion-label>Load template</ion-label>
        <ion-select>
            <ion-option *ngFor = "let template of templates;">
                {{templates}}
            </ion-option>
        </ion-select>
</ion-item>
```

Here's the template service code

```
export class TemplateService {
    public templates: Template[] = [];
...
getAllTemplates(): Template[] {
    return this.templates;
}
```

Here's the JS code

```
export class NewTransactionPage {
    templates: Template[];
...
constructor(public templateServicerino: TemplateService) {
    this.templates = this.templateServicerino.getAllTemplates();
```

I get an error saying "Uncaught (in promise): Error: StaticInjectorError(AppModule)[NewTransactionPage -> TemplateService: StaticInjectorError(Platform:core)[NewTransactionPage -> TemplateService: NullInjectorError: No provider for Template Service!"

1
javascriptangularionic-frameworkionic3
you have a typo in your code it is *ngFor not ngfor. - HasilT
It looks like you forgot to declare TemplateService in your app.module, or maybe one of TemplateServices own dependencies - MikNiller

1 Answers

1
votes

Declare the service as provider. One way to do it is to use the annotation like this.

@Injectable({
  providedIn: 'root'
})

export class TemplateService {//body}