使用Angular4从服务器加载信息时，HTML无法正确显示

Question

我刚开始学习Angular，我正试图为这个角色扮演社区创建一个角色画廊。你可以在这里看到它：http://bnf-front-site.s3-website-us-east-1.amazonaws.com/rollcall（你可能必须点击Home然后回到Roll Call;这也是一个问题）。我的问题是有时是character boxes appear out of line and on top of one another。我确定这是一个Angular问题（我从Mongo数据库加载信息的方式）还是HTML / CSS问题。无论哪种方式，我都不知道该怎么做。有什么我做错了或者我应该添加的东西吗？

这是我loading the information from my server的方式吗？因为我知道在有或没有Promise的情况下有不同的方法。这就是我在HTML中执行for循环的方式，也许我在那里做错了什么？我想我可以在声明之后添加| async但如果我没记错的话，我将不得不使用Observables。

<li *ngFor="let character of characters">
    <a href={{character.profileLink}}>
        <img src={{character.avatarLink}}/>
        <span>{{character.name}}</span>
    </a>
</li>

这是my source code for that page。我顺便使用Angular 4。

Answer 1

默认情况下，Angular会消毒。在角度文档中查看DOMSanitizer。

https://angular.io/api/platform-browser/DomSanitizer