Question

我正在尝试使用ngFor通过其源链接显示一系列图像，但出现错误，并且无法正常工作！

图片 HTML 代码位于我的卡组件内：

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

在 JS 文件中：

@Input() participantImages? = [];

数据来自我的其他组件，并且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>

JS：

participantImage = [];

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

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

我确定我缺少什么吗？

谢谢您的帮助吗？

Answer 1

实际上，在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，因为它表示图像列表；）

图像不使用带输入和ngFor的数组显示-Angular

1 个答案: