app-gift/app-angular/src/modules/lesson/science-detail/science-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-button>
        </ion-buttons>

    </ion-toolbar>
</ion-header>
<ion-content color="light">
    <ion-card>
        <img alt="科普图" [src]="science?.get('img')" />
        <ion-card-header>
            <ion-card-title>{{science?.get('name')}}</ion-card-title>
            <ion-card-subtitle>作者：{{science?.get('user')?.get('name')||"爱宠之家FavorPet"}}</ion-card-subtitle>
            <ion-card-subtitle>{{science?.get('type')||"科普类别"}}</ion-card-subtitle>
            <ion-card-subtitle>{{science?.get('createdAt')| date: 'YYYY/MM/dd/HH:mm'||"发布时间"}}</ion-card-subtitle>
        </ion-card-header>
        <ion-card-content>
            {{science?.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">这个科普太及时啦，对我很有帮助O.O</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">Sunrise</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>