<div class="filter-block">
<span>标题<input type="text" [(ngModel)]="filiter.title" /></span>
<span>创建者<input type="text" [(ngModel)]="filiter.author" /></span>
<span
>创建时间<input type="text" [(ngModel)]="filiter.startAt" /> -
<input type="text" [(ngModel)]="filiter.endAt"
/></span>
<span>
状态
//双向绑定数据
<select [(ngModel)]="filiter.status">
<option value="">全部</option>
<option value="1">草稿</option>
<option value="2">上线</option>
</select>
</span>
<span>
类型
<select [(ngModel)]="filiter.type">
<option value="">全部</option>
<option value="0">首页banner</option>
<option value="1">找职位banner</option>
<option value="2">找精英banner</option>
<option value="3">行业大图</option>
</select>
</span>
<button (click)="clearFiliter()">清空</button>
<button (click)="articleSearch()">查询</button>
</div>
<div class="article-wrap">
<header class="article-wrap-header">
<span>Article管理</span>
<div class="btn-wrap">
<button [routerLink]="['detail']">+新增</button>
</div>
</header>
<div class="table-wrap">
<table class="table table-bordered table-hover">
<thead class="thead-light">
<tr>
<th scope="col">序号</th>
<th scope="col">图片</th>
<th scope="col">标题</th>
<th scope="col">类型</th>
<th scope="col">创建者</th>
<th scope="col">创建时间</th>
<th scope="col">修改时间</th>
<th scope="col">状态</th>
<th scope="col">操作</th>
</tr>
</thead>
//遍历数组
<tbody *ngFor="let articleList of ARTList">
<tr>
<td>{{ articleList.id }}</td>
<td><img class="listImg" [src]="articleList.img" /></td>
<td>
<span>{{ articleList.title }}</span>
</td>
<td [ngSwitch]="articleList.type">
<span *ngSwitchCase="0">首页 banner</span>
<span *ngSwitchCase="1">找职位 banner</span>
<span *ngSwitchCase="2">找精英 banner</span>
<span *ngSwitchCase="3">行业大图</span>
</td>
<td>{{ articleList.author }}</td>
//使用管道方法 时间格式化
<td>{{ articleList.createAt | date: "yyyy/MM/dd HH:mm:ss" }}</td>
<td>{{ articleList.updateAt | date: "yyyy/MM/dd HH:mm:ss" }}</td>
// switch判断显示状态
<td [ngSwitch]="articleList.status">
<span *ngSwitchCase="1">草稿</span>
<span *ngSwitchCase="2">上线</span>
</td>
<td>
<button>上线</button>
<button>编辑</button>
<button>删除</button>
</td>
</tr>
</tbody>
//返回数组为空时显示没有结果 调用 .length 需加？
<tbody *ngIf="ARTList?.length == 0">
<td colspan="100%" class="empList">没有查询结果</td>
</tbody>
</table>
</div>
</div>
返回列表
评论