angualr6 使用ng-zorro 改变nzStyle 但是样式没有变化

zx兔子先生
  • 1.1k

clipboard.png
现在是想获取日期选择器所在栅格宽度 修改日期选择器的宽度 宽度是获取到了
但是还是初始的style值

  <div nz-col nzSpan='8' nzOffset='1' class="datepicker-wrapper">
                  <nz-form-item>
                    <nz-form-control nzSpan="24">
                      <nz-date-picker [nzStyle]='style' [formControlName]="control.start_at" [attr.id]="control.id" placeholder='开始时间' nzFormat="yyyy-MM-dd"></nz-date-picker>
                      <nz-form-explain *ngIf="getFormControl(control.start_at)?.dirty&&getFormControl(control.start_at)?.hasError('required')">请选择开始时间</nz-form-explain>
                    </nz-form-control>
                  </nz-form-item>
                </div>
                
                  style = {
    width: "200px"
  }
ngOnInit() {
    this.onSearchVehicle();
    this.addField();
  }
  ngAfterViewInit() {
    setTimeout(() => {
      this.datepicker_w = this.el.nativeElement.querySelector('.datepicker-wrapper').offsetWidth
      console.log(this.datepicker_w);
      this.style['width'] = `${this.datepicker_w}px`,
        console.log(this.style)
    }, 0)
  }

clipboard.png
打印的值是有的 但是并没有改变宽度 求大神指教

回复
阅读 6.8k
3 个回答
✓ 已被采纳

1.你先得去看组件解析的是的结构,确定你给那一层结构更改样式,然后按照解析之后的.class去进行更改
2.如果样式还不生效,使用::ng-deep,因为每一层解析后都有样式隔离

RainbomSea
  • 2
新手上路,请多包涵

[ngStyle] = "{'width': style.width}"

写法有问题,this.style={'width':${this.datepicker_w}px};

宣传栏