ng11 开发记录

Posted 2023-03-30 赵辉Coder

1.nzViewContainerRef 什么作用？

// 导入 NzModalService 模块

import NzModalService from \'ng-zorro-antd/modal\';

// 在组件中注入 NzModalService 服务

constructor(private modal: NzModalService)

setTempValue()

// 调用 create 方法创建模态框

const NzModalRef =this.modal.create(

  nzTitle: \'室温未达标用户\', // 模态框的标题

  nzWidth: \'80vw\', // 模态框的宽度

  nzStyle: top: \'60px\', bottom: \'10px\' , // 模态框的样式

  nzContent: MonitorRoomtAbnormalUsersModalComponent, // 模态框的内容，可以是一个组件或者一个模板

  nzViewContainerRef: this.viewContainerRef, // 指定模态框的视图容器，用于嵌入组件或者模板

  nzFooter: null, // 模态框的底部，可以是一个按钮数组或者一个模板，设置为 null 表示不显示底部

  nzMaskClosable: false, // 是否允许点击遮罩层关闭模态框，默认为 true

  nzClosable: true, // 是否显示右上角的关闭按钮，默认为 true

 // 传递给模态框内容组件的参数，可以在组件中通过 @Input() 接收

  nzComponentParams:

　　aligntime:this.aligntime,

    tab_showType:this.tab_showType,

    menuId:this.menuId,

    minT:this._minT,

    maxT:this._maxT,

    baseInfo:

    field:this._overviewData.field,

    id:this._overviewData.id,

    type:"wdb"

       

   

);

 

　 // 订阅NzModalRef 实例上的 setTempValue 事件

  NzModalRef.componentInstance.setTempValue.subscribe((res: any) =>

      console.log(\'子组件触发了自定义事件:\', res);

      // 在这里执行相应的操作

      if (res === \'reset\')

        this.maxValue =this.dataMax= this.maxValueCopy;

        this.minValue =this.dataMin= this.minValueCopy;

　　　　　

　　　　// 通过下面的方式修改，NzModalRef 实例的 componentInstance 属性中的 maxValue 属性值设置为 this.maxValueCopy 的值。子组件的值就会更新

        NzModalRef.componentInstance.maxValue=this.maxValueCopy

        NzModalRef.componentInstance.minValue=this.minValueCopy

      else

        this.dataMin = res.maxValue;

        this.dataMax = res.minValue;

     

     

      this.getChartData(this.detailData);

    );

 

 

 

子组件：

export class MonitorRoomtUserDetailSettempvalueModalComponent implements OnInit

  @Input() maxValue: number;

  @Input() minValue: number;

  @Output() readonly setTempValue = new EventEmitter();

  constructor()

  ngOnInit(): void

  resetValue()

    this.setTempValue.emit(\'reset\');

 

  valueBlur()

    console.log(this.maxValue);

    console.log(this.minValue);

    let obj = maxValue: this.maxValue, minValue: this.minValue ;

    this.setTempValue.emit(obj);

 

nzViewContainerRef 是 ng-zorro-antd 库中 ModalService 的一个选项参数，用于指定模态框内容要插入的视图容器。它的作用是将模态框的内容组件插入到指定的视图容器中，以便在模态框中显示该组件的内容。

通常情况下，nzViewContainerRef 会被设置为组件类中的 ViewContainerRef 对象，以确保模态框的内容组件被正确地插入到组件的视图容器中。这个参数是可选的，如果不指定，则默认为 body，即将模态框的内容插入到页面的 body 元素中。

 

 

 

2.求数组中 t_data 转为number类型时的最大值

const arr = [
maxT:1,minT:2,t_data:"",
maxT:1,minT:2,t_data:" ",
maxT:1,minT:2,t_data:"123",
maxT:1,minT:2,t_data:"13",
maxT:1,minT:2,t_data:undefined,
maxT:1,minT:2,t_data:null,
maxT:1,minT:2,t_data:222,
maxT:1,minT:2,t_data:0,
];

const maxTData = arr.reduce((max, obj) =>
const curr = Number(obj.t_data);
if (!isNaN(curr))
// 如果t_data可以转换为数字，进行比较
max = Math.max(max, curr);

return max;
, -Infinity);

console.log(maxTData); // 输出 222