Angular4 使用jquery插件動態(tài)產(chǎn)生的html標(biāo)簽，樣式表無法正常顯示？

1. 問題描述

在Angular4 中引入了jquery插件#jquery-seat-charts，測試jquery正常運行，當(dāng)使用其插件動態(tài)產(chǎn)生html標(biāo)簽時，卻發(fā)現(xiàn)標(biāo)簽中所有的class都無法正常顯示，該class已經(jīng)確認(rèn)引入且不沖突。初步思考，是因為angular的加載機制與jquery插件的使用的不同，導(dǎo)致無法正常識別樣式。現(xiàn)在依靠我目前的知識水平，還無法解決，懇請社區(qū)的朋友們能夠指引我思路，萬分感謝！

1. 代碼截圖

引入：

"scripts": [
        "../node_modules/jquery/dist/jquery.min.js",
        "./assets/js/jquery.seat-charts.js"

      ],

組件邏輯：

import { Component, OnInit } from '@angular/core';
declare const $: any;
@Component({
  selector: 'app-set-seat',
  templateUrl: './set-seat.component.html',
  styleUrls: ['../../../../assets/css/jquery.seat-charts.css', '/set-seat.component.css']
})
export class SetSeatComponent implements OnInit {
    constructor() {
    }
    ngOnInit() {
        let firstSeatLabel = 1;
        const  sc = $('#seat-map').seatCharts({
                map: [
                    'ff_ff',
                    'ff_ff',
                    'ee_ee',
                    'ee_ee',
                    'ee___',
                    'ee_ee',
                    'ee_ee',
                    'ee_ee',
                    'eeeee',
                ],
                seats: {
                    f: {
                        price   : 100,
                        classes : 'first-class',
                        category: 'First Class'
                    },
                    e: {
                        price   : 40,
                        classes : 'economy-class',
                        category: 'Economy Class'
                    }

                },
                naming : {
                    top : false,
                    getLabel : function (character, row, column) {
                        return firstSeatLabel++;
                    },
                },
                legend : {
                    node : $('#legend'),
                    items : [
                        [ 'f', 'available',   'First Class' ],
                        [ 'e', 'available',   'Economy Class'],
                        [ 'f', 'unavailable', 'Already Booked']
                    ]
                }
            });
    }
}

html代碼：

<div class="wrapper">
  <div class="container">
    <div class="seatCharts-row"></div>
    <div id="seat-map">
      <div class="front-indicator">Front</div>

    </div>
    <div class="booking-details">
      <h2>Booking Details</h2>

      <h3> Selected Seats (<span id="counter">0</span>):</h3>
      <ul id="selected-seats"></ul>

      Total: <b>$<span id="total">0</span></b>

      <button class="checkout-button">Checkout &raquo;</button>

      <div id="legend"></div>
    </div>
  </div>
</div>

1. 運行結(jié)果

實際運行結(jié)果：

期待運行結(jié)果：