app-gift/app-angular/src/modules/lesson/recommend-detail/recommend-detail.component.html

<ion-header>
    <ion-toolbar>
        <ion-buttons slot="start">
            <ion-button routerLink="/lesson/community" fill="clear" color="dark">
                <ion-icon name="chevron-back-outline" size="small"></ion-icon>返回</ion-button>
        </ion-buttons>
        <ion-buttons slot="end">
            <ion-button fill="clear" color="dark">
                <ion-note>收藏</ion-note>
            </ion-button>
        </ion-buttons>
    </ion-toolbar>
</ion-header>
<ion-content color="light">
    <ion-card>
        <img alt="美景图" [src]="recommend?.get('img')" />
        <ion-card-header>
            <ion-card-title>{{recommend?.get('name')}}</ion-card-title>
            <ion-card-subtitle>作者：{{recommend?.get('user')?.get('name')||"某某某"}}</ion-card-subtitle>
            <ion-card-subtitle>{{recommend?.get('createdAt')| date: 'YYYY/MM/dd/HH:mm'||"发布时间"}}</ion-card-subtitle>
            <div class="metadata-end-wrapper">
                <ion-button fill="clear" color="dark" size="small" class="see">
                    <ion-icon name="eye-outline" size="small"></ion-icon>
                    <ion-note>{{recommend?.get('see')}}</ion-note>
                </ion-button>
            </div>
        </ion-card-header>
        <ion-card-content>
            {{recommend?.get('content')}}
        </ion-card-content>
    </ion-card>
    <!-- 评论区 -->
    <ion-list [inset]="true">
        <ion-item>
            <ion-textarea label="留下你的想法吧" labelPlacement="floating" rows="5" [(ngModel)]="comment">
            </ion-textarea>
        </ion-item>
        <ion-item>
            <ion-buttons slot="end">
                <ion-button color="medium" fill="outline" (click)="addComment()" shape="round">确定</ion-button>
            </ion-buttons>
        </ion-item>
    </ion-list>
    <ion-list [inset]="true">
        <ng-container *ngFor="let comment of comments">
            <ion-item class="comment-list">
                <ion-label>
                    <p class="commentator">用户昵称</p>
                    <ion-note class="comment-content">{{comment}}</ion-note>
                </ion-label>
                <div class="comment-time">
                    <ion-note color="medium">{{currentDate|date: 'HH:mm'}}</ion-note>
                </div>
            </ion-item>
        </ng-container>

        <ion-item class="comment-list">
            <ion-label>
                <p class="commentator">啾啾啾啾~</p>
                <ion-note class="comment-content">第一次有人把座位讲的这么透彻！好聪明，时钟太好理解啦！</ion-note>
            </ion-label>
            <div class="comment-time">
                <ion-note color="medium">06:11</ion-note>
            </div>
        </ion-item>
        <ion-item class="comment-list">
            <ion-label>
                <p class="commentator">我一直很幸福</p>
                <ion-note class="comment-content">以前的我嗤之以鼻，现在的我逐字分析 ♥</ion-note>
            </ion-label>
            <div class="comment-time">
                <ion-note color="medium">03:44</ion-note>
            </div>
        </ion-item>
        <ion-item class="comment-list">
            <ion-label>
                <p class="commentator">如南怀瑾</p>
                <ion-note class="comment-content">@子熹 快看这个！</ion-note>
            </ion-label>
            <div class="comment-time">
                <ion-note color="medium">Yesterday</ion-note>
            </div>
        </ion-item>
        <ion-item class="comment-list">
            <ion-label>
                <p class="commentator">裹着心的光</p>
                <ion-note class="comment-content">山东基因爆发了！</ion-note>
            </ion-label>
            <div class="comment-time">
                <ion-note color="medium">Yesterday</ion-note>
            </div>
        </ion-item>
    </ion-list>
</ion-content>