css 将Angular 动画与Bootstrap一起使用遇到错误-〉无法读取未定义的属性(阅读“box-sizing”)

f0ofjuux  于 2022-12-15  发布在  Angular
关注(0)|答案(1)|浏览(115)

git -〉https://github.com/codezj/exampleAppAnimation的源代码。
我已经创建了一个方法来读取 Bootstrap css,并将其作为css在Angular中使用。但当我运行angular -〉Uncatched TypeError的项目时,它引发了一个错误TypeError:无法读取未定义的属性(阅读“box-sizing”)
代码-〉动画实用程序.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;
    

    }

表格.动画.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")),

])

我尝试了尽可能多的输出日志,但没有帮助。

bjp0bcyl

bjp0bcyl1#

如错误所示,您得到此错误的原因是:

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] );
 ...

相关问题