使用 [style]="" 的 Angular 2 IE 问题

Question

我有点头疼，我使用的是 angular 2 (2.0.0-beta.17)，在所有普通人使用的浏览器中，我的应用程序运行良好。但显然 IE 11

这是我在头部包含的 angular 脚本：

<script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.35.2/es6-shim.min.js'></script>
<script type='text/javascript' src='https://code.angularjs.org/2.0.0-beta.17/angular2-polyfills.min.js'></script>
<script type='text/javascript' src='https://code.angularjs.org/tools/system.js'></script>
<script type='text/javascript' src='https://code.angularjs.org/tools/typescript.js'></script>
<script type='text/javascript' src='https://code.angularjs.org/2.0.0-beta.17/Rx.min.js'></script>
<script type='text/javascript' src='https://code.angularjs.org/2.0.0-beta.17/angular2.min.js'></script>

现在我使用以下模板：

<div *ngIf="review_items" class="review-item">
    <a class="left" (click)="scrollAction('left')"><i class="fa fa-chevron-left" aria-hidden="true"></i></a>
    <a class="right" (click)="scrollAction('right')"><i class="fa fa-chevron-right" aria-hidden="true"></i></a>
    <a href="#" class="view-reviews">See all {{review_count}}</a>
    <div class="reviews-content">
        <div *ngFor="let review of review_items" [style]="reviewStyles(review.id)">
            <div class="author">{{review.review_name}} <i>Verified Buyer {{review.date}}</i></div>
            <div class="tour">
                <b>{{review.title}}</b>
                <div class="star-rating" [innerHTML]="review.stars"></div>
            </div>
            <div class="description">
                <div *ngIf="review.single_content">
                    <div [innerHTML]="review.single_content"></div>
                </div>
                <div *ngIf="review.hidden_content">
                    <div [innerHTML]="review.visible_content" style="display: inline;"></div>
                    <div [innerHTML]="review.hidden_content" [style.display]="displayReadMore(review.id)"></div>
                    <a href="#" class="read-more-review" (click)="readMore($event,review.id)" [innerHTML]="review.showmore_button"></a>
                </div>
            </div>
        </div>
    </div>
</div>

问题是第 6 行：[style]="reviewStyles(review.id)"，它只是我们最好的朋友 IE 中的问题，在 chrome、firefox、edge 中它可以 100% 运行；

在我的组件导出类中，以下函数绑定到该样式：

reviewStyles(id){
        return this.styles[id];
    }

和this.styles[id] 将包含类似这样的内容：opacity: 1; left: 0; 但在 IE 中它不返回任何样式，尽管如果我在 IE 中 console.log(this.styles[id]); 它确实显示正确的 CSS 信息但它永远不会到达 DOM 元素？救命！

Answer 1

是的，[styles] 在 IE 上不起作用，就像 [hidden] 属性一样。

IE 在处理属性方面有不同的方法，并且在某种程度上说你会被现代 JS 框架搞砸。

对于跨浏览器的实现，我宁愿在这里做的是：

<div *ngFor="let review of review_items" [style.opacity]="1" [style.left]="0">