app-gift/app-angular/src/modules/lesson/they/they.component.html

<ion-header>
    <ion-toolbar>
        <ion-title>
            消息
        </ion-title>
        <ion-buttons slot="end">
            <!-- 添加按钮 -->
            <ion-button id="person-add">
                <ion-icon name="add-outline"></ion-icon>
            </ion-button>
            <ion-popover trigger="person-add" triggerAction="click">
                <ng-template>
                    <ion-list>
                        <ion-item button detail="false">
                            <ion-icon name="person-add-outline" size="small"></ion-icon>
                            <ion-text>添加</ion-text>
                        </ion-item>
                        <ion-item button detail="false">
                            <ion-icon name="scan-outline" size="small"></ion-icon>
                            <ion-text>扫一扫</ion-text>
                        </ion-item>
                    </ion-list>
                </ng-template>
            </ion-popover>
            <!-- 搜索按钮 -->
            <ion-button>
                <ion-icon name="search-outline"></ion-icon>
            </ion-button>
        </ion-buttons>
    </ion-toolbar>
</ion-header>

<ion-content color="light">
    <!-- 消息列表 -->
    <ion-list [inset]="true">
        <ng-container *ngFor="let they of theyList">
            <ion-item-sliding>
                <ion-item button detail="false">
                    <ion-avatar slot="start">
                        <img alt="头像" [src]="they?.get('avatar')" (click)="goTheyDetail(they)" />
                    </ion-avatar>
                    <ion-label>
                        <p>{{they?.get("name")}}</p>
                        <ion-text>聊天内容</ion-text><br />
                    </ion-label>
                    <div class="metadata-end-wrapper" slot="end">
                        <ion-text color="medium">最近聊天时间</ion-text>
                        <ion-icon color="medium" name="chevron-forward"></ion-icon>
                    </div>
                </ion-item>
                <ion-item-options side="end">
                    <ion-item-option color="danger">删除</ion-item-option>
                </ion-item-options>
            </ion-item-sliding>
        </ng-container>
    </ion-list>
</ion-content>