css - 使用 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>

我得到了这个错误

Cannot find a differ supporting object '{'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'}
        }
    };
}

我承认我没有足够的精力来详细检查您的所有代码(顺便说一句:IMO，如果使用 ES6 模板字符串，代码将变得更具可读性)，但看起来您构建的是字符串而不是对象。换句话说，而不是……

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

……你应该使用类似……的东西

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

(未经测试)。所以这似乎是您如何构建代码的问题，而不是 Angular 的问题。