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

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 我正在显示图书 details.I 需要作者姓名在其 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

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

在组件中：

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 显示不同组件中数据的详细信息

display details of data in different component with help of its id in present component

typescript

angular

angular-httpclient