Question

service.ts

getAuthors() {
    this.authors=[{
      name:'raj',
      authorid:'3e32233edd222221'
      },{
      name:"roje",
      _id:"3e3223"
      }];
  }
  getBooks() {
    this.books=[{
      name:'2states',
      lang:'english',
      bookid:'123333',
      authorid:'3e32233edd222221'
      }];
  }

app.comp.html

<a *ngFor="let book of books">
  <p>{{book.name}}</p>
  <p>{{book.lang}}</p>
  <p>{{book.authorid}}</p> <!--this author id -->
  <p>{{author.name}}</p><!-- i need to show name with help 
  of authorid present in book -->
  </a>

在上面的html中，我正在显示书籍的详细信息。我需要在其ID的帮助下显示作者姓名这是我的设置https://stackblitz.com/edit/angular-859us9

Answer 1

创建作者地图，允许authorid访问作者的对象：

this.authorMap = this.authors.reduce((map, author) => {
  map[author.authorid] = author;
  return map;
}, {});

现在，您可以在模板中使用此地图来呈现作者的详细信息：

<p>{{book.authorid}}</p>
<p>{{authorMap[book.authorid].name}}</p>

Answer 2

添加此方法以获取特定作者：

在Conponent：

getSpecificAuthor(id){
    const result = this.authors.filter(author => author._id == id);
    if(result){
      return result[0]['name']
    }else{
      return 'no name'
    }
  }

在html中：

<a *ngFor="let book of books">
  <p>{{book.name}}</p>
  <p>{{book.lang}}</p>
  <p>{{book.authorid}}</p> <!--this author id -->
  <p>{{getSpecificAuthor(book.authorid)}}</p>
</a>

Here is the working slackblitz URL

借助其当前组件中的id显示不同组件中数据的详细信息

2 个答案: