Angular 7: тег выбора не отображает параметры

Question

Я создал простое приложение для блога, используя angular 7. В компоненте создания приложения пользователь должен заполнить некоторые детали в форме для создания блога. Тег select не отображает никаких параметров.

Ниже приведен html-код компонента:

<div class="form-group">
      <label>Category</label>
      <select [(ngModel)]="blogCategory" #category="ngModel" name="blogCategory" class="form-control" id="category" required>
            <option *ngFor="let category of possibleCategories" [value]="category">{{category}}</option>
          </select>
    </div>

Ниже приведен текстовый файл компонента:

 public blogTitle : string;
  public blogBodyHtml: string;
  public blogDescription : string;
  public blogCategory : string;
  public possibleCategories :["Comedy","Action","Drama","Technology"];



  ngOnInit() {
  }

  public createBlog():any{
    let blogData= {
      title: this.blogTitle,
      description:this.blogDescription,
      blogBody:this.blogBodyHtml,
      category:this.blogCategory
    }
    console.log(blogData);

    this.blogHttpService.createBlog(blogData).subscribe(

      data =>{
        console.log("Blog created");
        console.log(data);

        this.toastr.success('Blog posted successfully', 'Success');
        setTimeout(()=>{
          this.router.navigate(['/blog',data.data.blogId]);
        },5000)
      },

      error =>{
        console.log("error ocurred");
        console.log(error.errorMessage);

        this.toastr.error('Error occured','Error');

      }
    )
  }

Вот снимок экрана: выбор не работает

Answer 1

Вы не инициализировали возможные категории

В этой строке:

possibleCategories :["Comedy","Action","Drama","Technology"];

объявляется переменная с именем possibleCategories, тип переменной является массив из четырех перечисленных конкретных строк, но значение равно null.

Измените эту строку на

possibleCategories = ['Comedy','Action','Drama','Technology'];

, и вам следуетиметь больший успех.

Обратите внимание, что вам не нужно указывать тип, так как TypeScript может определить тип из присваивания.Вам нужно будет указать тип, только если массив мог бы содержать значения, которые не являются строками, в этом случае вы можете, например, объявить и инициализировать как

possibleCategories: (string|number)[] = ['Comedy','Action','Drama','Technology'];

или

possibleCategories: any[] = ['Comedy','Action','Drama','Technology'];

Answer 2

Это происходит потому, что ваш possibleCategories является не инициализированным .Вы определяете тип possibleCategories, не присваивая ему значение.Поэтому, когда select отображается на странице, он не находит никаких вариантов для циклического просмотра и отображения.

Вам следует присвоить значение possibleCategories:

public possibleCategories: Array<string>  = ["Comedy","Action","Drama","Technology"];

Answer 3

Попробуйте изменить строку

public possibleCategories :["Comedy","Action","Drama","Technology"];

на

public possibleCategories: any  = ["Comedy","Action","Drama","Technology"];