Angular如何使用[ngStyle]给div动态传递对象设置grid相关样式

问题根因 #

• 你的styleObject方法返回值错误：构造好样式对象后，你错误返回了obj.toString（这是Object原型的toString方法引用），而[ngStyle]指令要求传入键为CSS属性名、值为对应属性值的对象，传入函数引用无法被解析，因此样式不生效。
• 手动写死的写法传入的是符合要求的样式对象，因此可以正常生效。

修正方案 #

直接返回你构造好的样式对象即可，无需调用toString相关逻辑：

styleObject(row: string, column: string): Record<string, string> {
    const obj = {
        'grid-row': String(Number(row)),
        'grid-column': String(Number(column))
    };
    console.log(obj);
    return obj;
}

可选优化点 #

• 如果API返回的Row和Column本身就是数字格式的字符串，可以省去Number()转译的步骤：

  styleObject(row: string, column: string): Record<string, string> {
      return {
          'grid-row': row,
          'grid-column': column
      };
  }
  

• 你原代码中类型标注首字母大写的String是包装类，日常开发建议用小写的string标注基础字符串类型。

内容的提问来源于stack exchange，提问作者Roddam harsha vardhan reddy