How to use the css3 feature calc function in angular to perform some logic processing in combination with the variables of the ts file

This problem is really difficult to use in angular. The information available on the Internet is limited, so I took some detours, but fortunately it has been solved.

The following direct code demonstration

html file:

First of all, you must dynamically bind the function. Note that if you want to use [ngStyle] to directly use calc and variables in the line, you can try it. Anyway, I have used everything I can think of, but nothing has been solved. If you have a good method, you can also You can private message me!

<div [ngStyle]="add()" >这是一个盒子</div>

Secondly in the ts file:

import { Component } from '@angular/core';
@Component({
  selector: 'app-goods',
  templateUrl: './goods.component.html',
  styleUrls: ['./goods.component.less']
})
export class GoodsComponent {
  public m: number = 2;
  public n: number = 3;
  add1() {
    const style = {
      "width": calc(50, this.m) + "vw",
      "height": calc(50, this.n) + "vh",
      "backgroundColor": "blue"
    };
    return style;
  }
}
// 注意css3的特性calc函数不能直接在add1函数中直接运算，会报错，
// 此处定义一个方法函数进行想要的运算，调用到上面的函数中，就能达到想要的计算效果，目前这是我研究出来能够实现一些业务逻辑的方法
function calc(x: number, y: number) {
  return x / y
}

The effect is as follows: