发表于: 2019-08-22 20:07:50

1 859


今天完成了什么:

今天完成了小模块;

引入时间选择器和搜索按钮以及筛选框和表格;

遇到了什么问题;

如下图这个盒子的高度不知道怎么去css文件设置,哪怕给他在f12里添加行内样式也没反应-- ;后面才知道,这是一个整体,下面的列表栏应该写进去里面的盒子里去;


给html写文件样式时要在对应的ts文件里添加引用代码;

styleUrls: ['./m-select.component.css'],

中括号里面是你文件夹名称,这样才能引用;

终端跑项目的时候ng serve 显示

Error: More than one module matches. Use skip-import option to skip importing the component into the closest module.

原因:

项目中有多个模块(包含appModule , routingModule等),

所以需要选中要配置的app模块



后面加上--module=app就行了;

然后又显示什么--prot;是默认端口被占用什么的,

所以是ng serve --prot 4201 --module=app;才跑的起来;

然后是数据引用数据绑定什么的了,表格里的数据要向后台请求,这个还没搞懂,再看看怎么弄,官方资料看的也是懵-- 

收获了什么:

日期选择框的引用,

<nz-range-picker [nzRanges]="ranges1" nzShowTime nzFormat="yyyy/MM/dd HH:mm:ss" ngModel
              (ngModelChange)="onChange($event)"></nz-range-picker>



复制官网的代码生成令

ng g ng-zorro-antd:date-picker-start-end <name>







然后在app的html里面输入引用的东西,这个html就是主体,然后就是个个组件先在别的页面写好。然后这里引用吧;

select也类似这样子引入修改一些就行了,至于nzvalue关联的现在还在写静态,后面看看怎么关联吧;

<div class="mselect">


   <div class="u-choice">
     <div>类型选择
     <nz-select
       style="width: 200px;"
       nzShowSearch
       nzAllowClear
       nzPlaceHolder="Select a person"
       [(ngModel)]="selectedValue"
     >
       <nz-option nzLabel="全部" nzValue=""></nz-option>
       <nz-option nzLabel="首页banner" nzValue="0"></nz-option>
       <nz-option nzLabel="找职位banner" nzValue="1"></nz-option>
       <nz-option nzLabel="找精英banner" nzValue="2"></nz-option>
       <nz-option nzLabel="行业大图" nzValue="3"></nz-option>


     </nz-select>
   </div>
 </div>


 <div>状态选择
   <nz-select
     style="width: 200px;"
     nzShowSearch
     nzAllowClear
     nzPlaceHolder="Select a person"
     [(ngModel)]="selectedValue"
   >
     <!--      nzvalue是引导索引的意思-->
     <nz-option nzValue="" nzLabel="请选择"></nz-option>
     <nz-option nzValue="4" nzLabel="下线"></nz-option>
     <nz-option nzValue="5" nzLabel="上线"></nz-option>
   </nz-select>
 </div>
</div>


<div class="searchbutton">
 <button class="u-bton" nz-button nzType="primary" (click)="clickGet()"><i nz-icon nzType="search"></i>搜索</button>
 <button nz-button nzType="default" (click)="back()"> 取消</button>
</div>





明天计划:

继续任务;


返回列表 返回列表
评论

    分享到