Возникли проблемы при определении областей сетки с помощью 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 быть обработанным, как будто это было буквально значение атрибута во-первых.

Насколько я понимаю ваш код, решение должно быть простым: просто удалите двойные кавычки в правой части ваших объявлений стилей, то есть просто используйте простые объекты.

[ОБНОВЛЕНИЕ] В ответ на ваш комментарий, всего два фрагмента кода:

а) Этот компонент в основном делает то, что вы имели в своем первоначальном описании проблемы:

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'}"
        }
    };
}

Этот код приведет к ошибке "Не удается найти другой…", которую вы упомянули.

б) Код с удаленными кавычками, который будет работать:

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.