Javascript 不使用带有输入的数组和ngFor显示图像-角度

我正试图通过使用ngFor的源链接显示一组图像，但我收到了错误，它不起作用

“我的卡”组件中的图像HTML代码：

<div class="Session-Participants">
    <div  *ngFor="let image of {{ participantImages }}" >
        <img src='{{image}}'/>
    </div>
</div>

数据来自我的其他组件，html和JS如下：

<div *ngFor="let sessions of getSortedSessionList()">
    <div *ngFor="let session of sessions">
        <tl-session-card
          [title]="session.name"
          [path]="sessionPath(session.id, session.name)"
          [participantImages]="getParticipantDetails(session)" // HERE
         >     
        </tl-session-card>
    </div>
</div>

我希望返回“this.participantImage”，然后将其发送到卡组件，然后将其分解为单独显示

我肯定我错过了什么

---

如果您能提供帮助，谢谢您？

实际上，在stackblitz链接中，您有一个合适的数组，它不能完美地反映您刚才提供的代码

您需要确保

participantImage

保持一个数组，否则，

ngFor

将无法按预期工作，您将在控制台中看到一些错误

正如@prashant pimpale所说，您需要将结果附加到

participantImage

列表中

在ts文件中，最好使用

participantImage = [];

getParticipantDetails(session) {
    // ensures this.participanImage keeps its array type and will process all
    // other roles
    this.participantImage = session.roles.map(account => account.thumbnailURL);
    return this.participantImage;
}

希望能有帮助

---

PS：最好将

participantImage

的属性名设置为

participantImages

，因为它代表一个图像列表；）

使用最少工作代码的stackblitz会使帮助更容易。好吧，抱歉，这很复杂，我不确定是否应该在发布前创建一个，我会这样做。也许不是真正的答案，但我注意到一些事情：1）为什么不将ngfor放在包装分区上，而不是放在包装分区上？2） 为什么不直接将会话从ngfor传递到，而不是一点点的属性绑定呢？通过这种方式，您可以更好地控制输入数据3）getParticipantDetails（）返回字符串，但@Input（）需要数组？4） 该组件应使用缩略图url实现img标记。为什么将{{participantImages}}替换为@sparbreat try:

this.participantImage.push（session.roles[0].account.thumbnailURL）；

participantImage = [];

getParticipantDetails(session) {
    this.participantImage = session.roles[0].account.thumbnailURL;
    return this.participantImage;
}

participantImage = [];

getParticipantDetails(session) {
    // ensures this.participanImage keeps its array type and will process all
    // other roles
    this.participantImage = session.roles.map(account => account.thumbnailURL);
    return this.participantImage;
}