Question

Iam在Angular4.Iam工作，尝试使用flexslider在旋转木马中显示图像，图像数据来自API。我在index.html文件中包含了flexslider.css和flexslider.js文件，并且我包含了脚本代码在我当前的html文件中。但我没有得到任何数据和flexslider不工作.Below是我的代码：

＆＃13;

 <div id="slider" class="flexslider">
                    <ul class="slides" *ngFor="let image of productInfo.images">
                        <li>
                            <img src="{{image.src}}" />
                        </li>
                        <!-- items mirrored twice, total of 12 -->
                    </ul>
                </div>
                <div id="carousel" class="flexslider" *ngFor="let image of productInfo.images">
                    <ul class="slides">
                        <li>
                            <img src="{{image.src}}" />
                        </li>
                        <!-- items mirrored twice, total of 12 -->
                    </ul>
                </div>
                <script>
                    $('#carousel').flexslider({
                        animation: "slide",
                        controlNav: false,
                        animationLoop: false,
                        slideshow: false,
                        itemWidth: 210,
                        itemMargin: 5,
                        asNavFor: '#slider'
                    });

                    $('#slider').flexslider({
                        animation: "slide",
                        controlNav: false,
                        animationLoop: false,
                        slideshow: false,
                        sync: "#carousel"
                    });

                </script>
            </div>

＆＃13;

<!--
Author: W3layouts
Author URL: http://w3layouts.com
License: Creative Commons Attribution 3.0 Unported
License URL: http://creativecommons.org/licenses/by/3.0/
-->
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>SimplySaltApp</title>
    <base href="/">
    <!-- for-mobile-apps -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="keywords" content="Best Store Responsive web template, Bootstrap Web Templates, Flat Web Templates, Android Compatible web template, 
Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyEricsson, Motorola web design" />
    <script type="application/x-javascript">
        addEventListener("load", function() {
            setTimeout(hideURLbar, 0);
        }, false);

        function hideURLbar() {
            window.scrollTo(0, 1);
        }

    </script>
    <!-- //for-mobile-apps -->
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/flexslider/2.6.3/jquery.flexslider-min.js"></script>
    <link href="assets/css/bootstrap.css" rel="stylesheet" type="text/css" media="all" />
    <link href="assets/css/style.css" rel="stylesheet" type="text/css" media="all" />
    <!-- Demo CSS -->
    <link rel="stylesheet" href="assets/css/flexslider.css" type="text/css" media="screen" />

    <!-- Modernizr -->
    <script src="assets/js/modernizr.js"></script>
    <script src="assets/js/jquery.flexslider.js"></script>
    <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
    <!-- js -->
    <!--    <script src="assets/js/jquery.min.js"></script>-->
    <!-- //js -->
    <!-- cart -->
    <script src="assets/js/simpleCart.min.js"></script>
    <!-- cart -->
    <!-- for bootstrap working -->
    <script type="text/javascript" src="assets/js/bootstrap-3.1.1.min.js"></script>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <!-- //for bootstrap working -->
    <link href='//fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,600,600italic,700,700italic,800,800italic' rel='stylesheet' type='text/css'>
    <link href='//fonts.googleapis.com/css?family=Lato:400,100,100italic,300,300italic,400italic,700,700italic,900,900italic' rel='stylesheet' type='text/css'>
    <!-- timer -->
    <link rel="stylesheet" href="assets/css/jquery.countdown.css" />
    <!-- //timer -->
    <!-- animation-effect -->
    <link href="assets/css/animate.min.css" rel="stylesheet">
    <script src="assets/js/wow.min.js"></script>
    <script src="assets/js/popup.js" type="text/javascript"></script>
    <script>
        new WOW().init();

    </script>
    <!-- //animation-effect -->
</head>

<body>
    <app-root></app-root>
</body>

</html>

＆＃13;

Answer 1

在您的控制器类中执行此操作

ngDoCheck(){
    $('.flexslider').flexslider();
}

Answer 2

您可能有订购问题。

如果您在 Angular完成它之前设置了FlexSlider ，那么您的订购会导致以下行为：

FlexSlider在单个模板元素上初始化

Angular运行并从DOM中删除模板，将其替换为实际内容

苦难随之而来

你需要在 Angular完成它之后初始化FlexSlider ......

Angular运行并从DOM中删除模板，将其替换为实际内容

FlexSlider初始化Angular创建的内容

幸福随之而来

Flexslider在Angular4中不起作用？

2 个答案: