javascript - NG-ZORRO 滑块 Angular 7

Question

希望任何人都可以对此有所了解。

我有一个带有 ng-zorro 的 Angular 7 项目。

这是我的app.component.html

    <nz-layout>
     <nz-header>Header</nz-header>
     <nz-layout>
     <nz-sider>Sider</nz-sider>
     <nz-content>
      <div nz-row>
       <div nz-col nzSpan="20" nzOffset="2">
        <h5>Drawer without Service</h5>
          <button nz-button nzType="primary" 
       (click)="open()">Open</button>
          <nz-drawer [nzClosable]="false" [nzVisible]="isOpen" 
             [nzWidth]="320" nzTitle="Basic Drawer" 
        (nzOnClose)="close()">
            <p>Slider</p>
            <nz-slider
                nzDots nzRange
                [nzMarks]="marks"
                [nzStep]="1" [nzMin]="1" [nzMax]="maxMark"
                [nzDefaultValue]="selectedMark">
            </nz-slider>
          </nz-drawer>
        </div>
      </div>
      <div nz-row>
        <div nz-col nzSpan="20" nzOffset="2">
          <div>
            <h5>Drawer with Service</h5>
            <button nz-button nzType="primary" 
    (click)="openDrawer()">Open</button>
          </div>
        </div>
      </div>
    </nz-content>
  </nz-layout>
  <nz-footer>Footer</nz-footer>
   </nz-layout>

这是我的app.component.ts

import { Component, Input } from '@angular/core';
import { NzDrawerService, NzDrawerRef } from 'ng-zorro-antd';

@Component({
  selector: 'custom-drawer',
  template: `
    <p><button nz-button nzType="dashed" (click)="close()">Close</button></p>
    <nz-slider
      nzDots nzRange
      [nzStep]="1" [nzMin]="1" [nzMax]="maxMark"
      [nzMarks]="marks"
      [nzDefaultValue]="selectedMark">
    </nz-slider>
  `
})
export class CustomDrawerComponet {
  @Input() marks: {};
  @Input() selectedMark;
  get maxMark() { return Object.keys(this.marks).length; }
  constructor(private drawerRef: NzDrawerRef) {
  }

  close() {
    if (this.maxMark === 5) {
      this.marks = {
        1: 'M1',
        2: 'M2',
        3: 'M3'
      };
    } else {
      this.marks = {
        1: 'M1',
        2: 'M2',
        3: 'M3',
        4: 'M4',
        5: 'M5'
      };
    }
    this.drawerRef.close('Closed!');
  }
}

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  title = 'NG Zorro Playground';
  isOpen = false;
  marks: any = {
    1: 'M1',
    2: 'M2',
    3: 'M3'
  };
  get maxMark() { return Object.keys(this.marks).length; }
  selectedMark = [2, 2];

  constructor(private drawerService: NzDrawerService) { }
  close() {
    this.changeMarks();
    this.isOpen = false;
  }

  open() {
    this.isOpen = true;
  }

  changeMarks() {
    if (this.maxMark === 5) {
      this.marks = {
        1: 'M1',
        2: 'M2',
        3: 'M3'
      };
    } else {
      this.marks = {
        1: 'M1',
        2: 'M2',
        3: 'M3',
        4: 'M4',
        5: 'M5'
      };
    }
  }

  openDrawer() {
    const drawerRef = this.drawerService.create({
      nzTitle: 'Drawer Basic From Service',
      nzWidth: 320,
      nzClosable: true,
      nzContent: CustomDrawerComponet,
      nzContentParams: {
        marks: { 1: 'M1', 2: 'M2', 3: 'M3' },
        selectedMark: this.selectedMark
      }
    });

    drawerRef.afterClose.subscribe(data => {
      console.log(data);
    });

    drawerRef.afterOpen.subscribe(() => {
      console.log('Drawer Opened.');
    });
  }
}

当我动态更新标记时，布局没有正确呈现，我得到了这个：

它仍然假设旧对象。如何强制应用正确重新渲染？

非常感谢。

Answer 1

我最终将抽屉创建为服务，每次调用此服务时，滑块都会呈现良好并且标记显示正确。我仍然想了解如何触发 UI 手动更新之类的。