Question

我使用angular 7创建了一个简单的博客应用程序。在该应用程序的create组件中，用户必须填写表单中的一些详细信息以创建博客。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');

      }
    )
  }

这是屏幕截图： select not working

Answer 1

您尚未初始化可能的类别

此行：

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

声明了一个名为possibleCategories的变量，该变量的类型是列出的四个特定字符串的数组，但是 value 是{{ 1}}。

更改该行以读取

null

您应该会获得更大的成功。

请注意，您不必指定类型，因为TypeScript可以从分配中确定类型。仅在数组可能包含非字符串值的情况下才需要指定类型，在这种情况下，您可以例如声明并初始化为

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

或

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

Answer 2

尝试更改行

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

到

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

Answer 3

之所以会这样，是因为您的possibleCategories未未初始化。您正在定义possibleCategories的类型而不为其分配值。因此，当select在页面上呈现时，它找不到任何循环显示的选项。

您应将值分配给possibleCategories：

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

Angular 7：“选择”标签不显示选项

3 个答案: