今天完成的事情
今天把js6-10任务的所有功能基本上是实现了,如下

今天遇到的问题
问题1:做到后面才知道新增/编辑页面,选择类型为“行业大图" 时,右侧需要显示行业选项,当选择其他选项时,行业选项无需显示,如下

解决:开始时候,我在html中类型后面添加了行业选项的选项,使用内联样式display:none,这里行业选项就消失了,本来我想在ts文件中使用js代码来实现当类型为行业大图时,右侧显示行业选项,但是大佬告诉我一个更简单的方法,也是很常用的方法,只是我之前没有时间过,那就是ngIf的使用,如下
<div class="detailList">
<span>类 型</span>
<nz-select [(ngModel)]="imgObj.type" style="width: 180px;">
<nz-option nzValue="0" nzLabel="首页banner"></nz-option>
<nz-option nzValue="1" nzLabel="找职位banner"></nz-option>
<nz-option nzValue="2" nzLabel="找精英banner"></nz-option>
<nz-option nzValue="3" nzLabel="行业大图"></nz-option>
</nz-select>
<nz-select [(ngModel)]="imgObj.industry"
style="width: 180px;margin-left: 28px" *ngIf="imgObj.type == 3">
<nz-option nzValue="0" nzLabel="移动互联网"></nz-option>
<nz-option nzValue="1" nzLabel="电子商务"></nz-option>
<nz-option nzValue="2" nzLabel="企业服务"></nz-option>
<nz-option nzValue="3" nzLabel="O2O"></nz-option>
<nz-option nzValue="4" nzLabel="教育"></nz-option>
<nz-option nzValue="5" nzLabel="金融"></nz-option>
<nz-option nzValue="6" nzLabel="游戏"></nz-option>
</nz-select>
</div>
以上代码中,ngif放在目标标签中,通过一个简单的判断,当判断成立时,则该html会显示,否则不会显示
问题2:类型为”行业大图“时,行业选项如果不选择,数据依然可以上传。
解决1:在ts文件中赋予初始值,如下
public imgObj: any = {
type: '3',
industry: '0'
}
解决2:在上传数据的方法中通过if判断来解决,如下
if(params.type == 3){
if(params.industry==null){
alert("清选择你的行业!")
return;
}
}
今天的收获
学会ngif判断语句的使用
定义和用法
ng-if 指令用于在表达式为 false 时移除 HTML 元素。
如果 if 语句执行的结果为 true,会添加移除元素,并显示。
ng-if 指令不同于 ng-hide, ng-hide 隐藏元素,而 ng-if 是从 DOM 中移除元素。
语法
<element ng-if="expression"></element>
所有的 HTML 元素都支持该指令。
明天的计划
测试任务6-10,看看还有没有隐藏的bug。
完善任务6-10,看下能不能添加更多实用性的功能,比如点击退出按钮页面跳转后,点击浏览器返回按钮无效,或者返回后需要重新登陆,保障安全性。
评论