将角度动画与引导一起使用遇到错误 -> 无法读取未定义的属性(读取"框大小")

Question

git源代码->https://github.com/codezj/exampleAppAnimation。

我已经创建了一个方法来读取bootstrap css并在Angular中使用它们。但它提出了一个错误，当我运行项目的角->TypeError: Cannot read properties of undefined (reading 'box-sizing')

密码→animationUtils。ts→

export function getStylesFromClasses(names: string | string[],
elementType: string="div") : {[key: string]: string | number}


{
let elem = document.createElement(elementType);
console.log(elem);

(typeof names == "string" ? [names]:names).forEach(c => elem.classList.add(c));
let result : any;
for (let i =0; i < document.styleSheets.length; i++){
let sheet = document.styleSheets[i] as CSSStyleSheet;

let rules = sheet.rules || sheet.cssRules;
console.log(rules,'rules rulesrulesrulesrules');
for (let j =0; j< rules.length; j++){
if(rules[j].type == CSSRule.STYLE_RULE){
let styleRule = rules[j] as unknown as CSSStyleSheet;
console.log(styleRule,'styleRules----styleRulestyleRule');
if ( styleRule instanceof CSSStyleRule){

if (elem.matches(styleRule.selectorText)){
for (let k = 0; k < styleRule.style.length; k++){
console.log(k,'k kkkkkk');

let index: any = styleRule.style[k]
console.log(styleRule.style[k],result[index],styleRule.style[index] );

// result[index] = styleRule.style[index];
}

}
}

}
}
}
return result;

}

table.animations。ts→

import {trigger, style, state, transition, animate, group} from "@angular/animations"
import { bindCallback } from "rxjs"
import { getStylesFromClasses } from "./animationUtils"


const commonStyles = {
border: "black solid 4px",
color: "white"
}
export const HighlightTrigger = trigger("rowHightlight",[

// state("selected", style([commonStyles,{
//     backgroundColor: "lightgreen",
//     fontSize:"20px"
// }])),

// state("notselected", style([commonStyles,{
//     backgroundColor: "lightsalmon",
//     fontSize:"12px",
//     color: "black"
// }])),
state("selected",style(getStylesFromClasses(["bg-success"]))),
// state("notselected",style(getStylesFromClasses(["bg-info"]))),

state("void", style({

transform: "translateX(-50%)"
})),
transition("* => notselected", animate("200ms")),
transition("* => selected", [animate("400ms 200ms ease-in",

style({
backgroudColor: "lightblue",
fontSize: "25px"
})),
animate("250ms",style({
backgroudColor: "lightcoral",
fontSize: "30px"
})),
group([
animate("250ms", style({
backgroundColor: "lightcoral",
})),
animate('450ms', style({fontSize:"30px"})),
]),
animate("200ms")
]




),
transition("void => *", animate("500ms")),

])

我尽量输出日志，但是没有用。

Answer 1

正如错误所示，您会得到这个错误，因为在这一行中:

console.log(styleRule.style[k],result[index],styleRule.style[index]);

对于index = 'box-sizing'，您正在尝试读取对象result中未定义的属性。

你应该给它赋一个值，这取决于你使用这个变量的目的:

...
if ( styleRule instanceof CSSStyleRule){
result = styleRule.style;
if (elem.matches(styleRule.selectorText)){
...

或者用result = []初始化结果，取消result[index] = styleRule.style[index];注释，放在console.log前面:

...
let index: any = styleRule.style[k]
result[index] = styleRule.style[index];                         
console.log(styleRule.style[k],result[index],styleRule.style[index] );
...