Question

我正在尝试使用Angular Dropdown。 JSON如下-

{
       { 
      "bookId":"1",
      "authors":{ "author1", "author2"}
       } 
       { 
      "bookId":"2",
      "authors":{ "author2", "author3"}
       } 
}

已创建一个名为Book的类，该类将上述值存储在名为books的Book数组中。在html代码中具有以下内容-

 <select [(ngModel)]="book.id" (ngModelChange)='onBookSelected($event)'>  
            <option *ngFor="let book of books"
            [value] = "book.authors">{{book.id}}</option>
          </select>

在组件中具有如下所示的onBookSelected-

onBookSelected(val: any)
{
  console.log(val);
}

我没有得到作者名单，但得到了

[object Object],[object Object],[object Object]

我还尝试创建一个类作者数组，并按如下方式使用它-

onBookSelected(authorList : any)
{
  console.log(authorList );
}

但获得与

相同的输出

   [object Object],[object Object],[object Object]

从下拉列表中选择该书时，请有人帮忙获得作者列表。谢谢

Answer 1

这有什么问题？作者是一个对象。但是它认为您希望它是一个数组

  "authors":[ "author1", "author2"]

这将在控制台中正常打印。

如果愿意

onBookSelected(authorList : any)
{
  console.log(JSON.stringify(authorList));
}

它将打印您期望的内容。

Answer 2

您需要进行一些更改才能获得作者

<select [(ngModel)]="selectedBookId" (ngModelChange)='onBookSelected($event)'>  
            <option *ngFor="let book of books"
            [value] = "book.id">{{book.id}}</option>
</select>

，然后在onBookSelected($event)

component.ts

     let books=   {
           { 
          "bookId":"1",
          "authors":{ "author1", "author2"}
           } 
           { 
          "bookId":"2",
          "authors":{ "author2", "author3"}
           } 
     }

    onBookSelected(event){
       Object.values(this.books).forEach(book =>{
             if(book.bookId == this.selectedBookId){
                 console.log(Object.values(book.authors))
             }
       })
    }

使用Angular Dropdown获取数组值

2 个答案: