使用ngStyle定义网格区域时遇到问题

Question

我创建了一个生成CSS网格的机制，我正试图用ngStyle实现。这是生成的内容

"GridAreas": {
    "LinkContainer": "{'grid-area': 'link-row-start / content-col-start / link-row-end / content-col-end'}",
    "BodySection"  : "{'grid-area': 'content-row-start / content-col-start / content-row-end / content-col-end', 'justify-content': 'stretched'}",
    "FooterSection": "{'grid-area': 'footer-row-start / content-col-start / footer-row-end / footer-col-end'}"
}

我尝试在这样的html中使用它

<link-container [ngStyle]="Output.GridAreas.LinkContainer" [SiteLinks]="Links"></link-container>

我收到了这个错误

无法找到不同的支持对象'{'grid-area'：'link-row-start / content-col-start / link-row-end / content-col-end'}'

然后我尝试使用这样的函数

loadLinkArea(){  return this.Output.GridAreas.LinkContainer;  }

像这样在HTML中调用

<link-container [ngStyle]="loadLinkArea()"></link-container>

我收到了同样的错误。以下是数据的处理方式。

整体数据的形状

export class GridType {
    GridName : string          = '';
    Columns  : Array<GridLine> = new Array();
    Rows     : Array<GridLine> = new Array();
    Areas    : Array<AreaList> = new Array(); /*the part I'm focusing on*/
    Type     : string          = '';
}

export class AreaList {
    AreaName : string = '';
    Specs    : GridArea = new GridArea();
}

export class GridArea {
    Area    : string = '';
    Params? : Array<ParamData> = new Array();
}

export class ParamData {
    Param   : string = '';
    Setting : string = '';
}

区域数据

Areas    : [
        {
            AreaName : 'LinkContainer',
            Specs    : { Area: 'link-row-start / content-col-start / link-row-end / content-col-end' }
        },
        {
            AreaName : 'BodySection',
            Specs    : {
                Area    : 'content-row-start / content-col-start / content-row-end / content-col-end',
                Params  : [    { Param: 'justify-content', Setting: 'stretched' }    ]
            }
        },
        {
            AreaName : 'FooterSection',
            Specs    : { Area: 'footer-row-start / content-col-start / footer-row-end / footer-col-end' }
        }
    ]

上面的数据体传递给了这个函数

export function buildGridAreas( data: AreaList[] ){
    let areas: StringList = new StringList();

    data.forEach( a => {
        let b: string = '';
        if( a.Specs.Params ){
            let c: string[] = [];

            a.Specs.Params.forEach(  prs => {
                const d: string = "'"+prs.Param+"': "+prs.Setting;
                c.push(d);
            });
            b = "{'grid-area': "+a.Specs.Area+", "+c.join(', ')+"}";
        }
        else{ b = "{'grid-area': "+a.Specs.Area+"}"; }
        areas[ a.AreaName ]=b;
    });
    return areas;
}

生成用于定义网格的其余代码如下所示

 "GridCode": "[top-bleed-start] 10.245000000001024px [top-bleed-end link-row-start] 40.9800000000041px [link-row-end content-row-start] [content-row-end footer-row-start] 163.9200000000164px [footer-row-end bottom-bleed-start] 10.245000000001024px [bottom-bleed-end]/[left-bleed-start] 10.245000000001024px [left-bleed-end content-col-start] 1331.8500000001332px [content-col-end right-bleed-start] 10.245000000001024px [right-bleed-end]"

任何人都可以找到我出错的地方吗？

Answer 1

ngStyle的语法是这样的：

<div [ngStyle]="{'background-color' : color}"></div>

如果这样做，则属性值是表达式。因此，在您的情况下，Angular将Output.GridAreas.LinkContainer的值视为表达式。另一方面，您似乎期望将Output.GridAreas.LinkContainer的值视为首先是字面上的属性值。

据我理解你的代码，解决方案应该很简单：只需从样式声明的右侧删除双引号，即只使用普通对象。

[更新]在回复您的评论时，只需两段代码：

a）这个组件基本上完成了初始问题描述中的内容：

import {Component} from '@angular/core';

@Component({
    selector: 'app-root',
    template: `<div [ngStyle]="Output.GridAreas.LinkContainer">Works</div>`
})
export class AppComponent {
    public Output = {
        GridAreas: {
            LinkContainer: "{'grid-area': 'link-row-start / content-col-start / link-row-end / content-col-end'}"
        }
    };
}

此代码将导致您提到的“无法找到差异...”错误。

b）删除了引号的代码，这将起作用：

import {Component} from '@angular/core';

@Component({
    selector: 'app-root',
    template: `<div [ngStyle]="Output.GridAreas.LinkContainer">Works</div>`
})
export class AppComponent {
    public Output = {
        GridAreas: {
            LinkContainer: {'grid-area': 'link-row-start / content-col-start / link-row-end / content-col-end'}
        }
    };
}

我承认我没有足够的承诺来详细介绍你的所有代码（BTW：IMO，如果使用ES6模板字符串，代码将变得更易读），但它看起来像是构造字符串而不是对象。换句话说，而不是......

b = "{'grid-area': "+a.Specs.Area+"}";

......你应该用...

b = {'grid-area': a.Specs.Area};

（未经测试）。所以它似乎是你如何构造代码的问题，而不是Angular问题。