Sign in

Angualr6 uses ng Zorro to change nzstyle, but the style doesn't change

Kerek edited in Tue, 23 Aug 2022

Now I want to get the grid width of the date selector. I want to modify the width of the date selector, but it is the initial value

  <div nz-col nzSpan='8' nzOffset='1' class="datepicker-wrapper">
                    <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>
                  style = {
    width: "200px"
ngOnInit() {
  ngAfterViewInit() {
    setTimeout(() => {
      this.datepicker_w = this.el.nativeElement.querySelector('.datepicker-wrapper').offsetWidth
      this.style['width'] = `${this.datepicker_w}px`,
    }, 0)

Print the value is there, but did not change the width of God for advice

3 Replies
commented on Tue, 23 Aug 2022

one . You have to look at the structure of the component first , Make sure you change the style of the layer structure , And then according to the analysis after . Class to make changes 2 . If the style doesn't work , use :: ng - deep , Because every layer has style isolation after parsing

commented on Tue, 23 Aug 2022

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

commented on Tue, 23 Aug 2022

There's something wrong with the writing, this.style= {'width':${ this.datepicker_ w}px};