angular4 数组操作div，渲染染色，大小，旋转角度

作者：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)

}

}