发表于: 2019-11-01 19:00:17

1 990


今天完成的事情

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


今天遇到的问题

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

解决:开始时候,我在html中类型后面添加了行业选项的选项,使用内联样式display:none,这里行业选项就消失了,本来我想在ts文件中使用js代码来实现当类型为行业大图时,右侧显示行业选项,但是大佬告诉我一个更简单的方法,也是很常用的方法,只是我之前没有时间过,那就是ngIf的使用,如下

        <div class="detailList">
            <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</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 imgObjany = {
        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,看下能不能添加更多实用性的功能,比如点击退出按钮页面跳转后,点击浏览器返回按钮无效,或者返回后需要重新登陆,保障安全性。



返回列表 返回列表
评论

    分享到