我创建了一个生成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]"
任何人都可以找到我出错的地方吗?
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问题。