Question

嗨，我在绑定到属性以获取HTML并从json进行翻译时遇到问题：[innerHTML] =“ articles。{{articleId}}。description | translation”。

"articles": [
    {
        "id": 1, 
        "title": "Title phone", 
        "description": "<p>some text</p>",
        "img": "article-1.png",
        "alt": "Phone"
    },
    {
        "id": 2, 
        "title": "this is title", 
        "description": "<p>Some text</p>
        "img": "article-2.jpg",
        "alt": "MacBook"
    }
]

Answer 1

要显示所有文章，可以使用以下cpde

<div *ngFor="let article of articles">
  <div [innerHTML]="article.description | translate"></div>
</div>

要显示特定文章，请使用以下代码

<div [innerHTML]="articles[articleId].description | translate"></div>

Answer 2

您可以使用组件函数从您那里获取正确的文章。问题在于，该函数将使用可能不是很出色的DoCheck来调用。另一个选择是创建一个可重复使用的管道，您可以将其转换为id-> article对象：

@Pipe({
  name: 'keyObjects'
})
export class KeyObjectsPipe<T = any> implements PipeTransform {

  transform(objects: T[], key: keyof T): {[key: string]: T}[] {
    return (objects || []).map((object) => ({[object[key]]: object }));
  } 
}

由于这是一个纯管道，因此不会每个DoCheck都调用它，并且您可以将此逻辑重用于可能拥有的其他任何对象。用法将是：

<div [innerHTML]="(articles | keyObjects:'id')[articleId]?.description | translate"></div>

另一个甚至可能更好的选择是创建一个包含articleId流的Observable。然后，您可以将其与articles流一起映射以获得正确的对象：

//pseudo
articles$: Observable<Article[]> = this.http.get('/articles'); 

// if you have :article as route param
articleId$ = this.route.params.pipe(map(({ article }) => article));

// get the right article
article$ = combineLatest(
  this.articles$,
  this.articleId$
).pipe(
  map(([ articles, articleId ]) => articles.find((article) => article.id === articleId)),
  shareReplay(1)
);

然后可以将其与async管道一起使用：

<div [innerHTML]="(article$ | async)?.description | translate"></div>

如何将innerHTML与translate绑定

2 个答案: