作者：LoveEmperor-王子様
HTML：
<div id= "seats" * ngIf= "parkTierBool==true" > <div class= "carportMap" > <img class= "carportIMG" src= "../assets/img/carportImg1.png" width= "100%" /> <div class= "carportCellMap" > <span * ngFor= "let subCarport of carObj; let i = index" > <div class= "seat3" name= "carInfoDIv" id= "{{subCarport.carportId}}" style= "position: relative;vertical-align: middle;" [ style. left. px]= subCarport.horizontal*currentWidth [ style. top. px]= subCarport.vertical*currentheight [ ngStyle]= "{'background-color':subCarport.reserved === 1 ? '#33FF66' : (subCarport.used == 1 ? 'red':(subCarport.youReserved===1 ? '#33FF66':'white'))}" [ style. width. px]= subCarport.width*currentWidth [ style. height. px]= subCarport.height*currentheight >{{subCarport.carportId}} </div> </span> </div> </div> </div>ng：
this. currentWidth = window. screen. width; this. currentheight = window. screen. height- 48; this. carportList4 = [ { "id" : 3, "seat" : "1-3", "horizontal" : "0.13", "vertical" : "0.14", "status" : 1, "transform" : "7", "width" : "0.03", "height" : "0.04", }, { "id" : 4, "seat" : "1-3", "horizontal" : "0.16", "vertical" : "0.14", "status" : 1, "transform" : "8", "width" : "0.03", "height" : "0.04", }, { "id" : 5, "seat" : "1-3", "horizontal" : "0.13", "vertical" : "0.15", "status" : 1, "transform" : "9", "width" : "0.05", "height" : "0.02", }, ] this. carportList3 =[ { "carportId" : 1, "seat" : "1-1", "horizontal" : "", "vertical" : "", "status" : 0, "transform" : "10deg", "used" : 0, "reserved" : 1, "youReserved" : 0, "empty" : 1 }, { "carportId" : 2, "seat" : "1-2", "horizontal" : "0.21", "vertical" : "0.22", "status" : 2, "transform" : "0deg", "used" : 0, "reserved" : 0, "youReserved" : 0, "empty" : 0 }, { "carportId" : 3, "seat" : "1-2", "horizontal" : "0.21", "vertical" : "0.22", "status" : 2, "transform" : "0deg", "used" : 0, "reserved" : 0, "youReserved" : 0, "empty" : 0 } ] for( var i = 0; i< this. carportList4. length; i++) //整合两个数组数据，页面上遍历 { var carstr = { carportId: this. carportList4[ i]. id, horizontal: this. carportList4[ i]. horizontal, vertical: this. carportList4[ i]. vertical, width: this. carportList4[ i]. width, height: this. carportList4[ i]. height, used: this. carportList3[ i]. used, reserved: this. carportList3[ i]. reserved, youReserved: this. carportList3[ i]. youReserved }; this. carObj. push( carstr); } 旋转div角度 for( var i = 0; i< this. carportList4. length; i++){ if( this. carportList4[ i]. transform != "0"){ // console.log(this.carportList4[i].transform); var mydiv = document. getElementsByName( "carInfoDIv"); var mydiv2 = document. getElementById( mydiv[ i]. id); mydiv2. style. transform = 'rotate(' + this. carportList4[ i]. transform+ 'deg)'; // console.log(mydiv2) } }