从api获取数据后的Angular *ngIf（渲染）问题

Question

*ngIf="" 指令有问题。 当我在 AppComponent 中获取数据时，如果我使用 *ngIf=""，我的 Revolution Slider 将不会显示

没有 ngIf

使用 ngIf

我的代码看起来不错

Service.ts

  getAllPlaces(language, currency, holiday_type, checkin, checkout, groups, page) {
    let params = new HttpParams()
      .set('currency', currency)
      .set('holiday_type', holiday_type)
      .set('checkin', checkin)
      .set('checkout', checkout)
      .set('groups', groups)
      .set('language', language)
      .set('page', page);

    return this.http.get("/api/v2/halalbooking", {params: params}).toPromise();
  }
}

app.component.ts

  resorts: any;
  isLoading = true;

  constructor(private halalBookingService: HalalbookingService) {
  }

  ngOnInit(): void {
    this.getAllPlaces().then(() => {
        this.isLoading = false;
    });
  }

  getAllPlaces(): Promise<any>{
    return this.halalBookingService.getAllPlaces("tr", "EUR", "resort", "2020-10-15", "2020-10-16", "2", 1)
      .then(data => {
        this.resorts = data;
        console.log(this.resorts)
      })
  }

app.component.html

  <div *ngIf="!isLoading" id="page-wrapper" class="ng-cloak">
    <app-navigation></app-navigation>
    <app-home></app-home>
  </div>

希望有人能解决这个问题

Answer 1

您可能在更改检测方面遇到问题

下面试试

 constructor(private readonly changeDetectorRef: ChangeDetectorRef){}

 this.getAllPlaces().then(() => {
        this.isLoading = false;
        this.changeDetectorRef.markForCheck();
    });

Answer 2

@PushpikaWan 遗憾的是它没有用:(

我认为这取决于脚本文件，因为 ng if 在滑块 html 中也不起作用。

但我不知道为什么，我已经测试了所有标签中的 ngIf。

global index.html

中的 Myscripts

<script type="text/javascript">
  var tpj = jQuery;

  var revapi486;
  tpj(document).ready(function () {
    if (tpj("#rev_slider_486_1").revolution == undefined) {
      revslider_showDoubleJqueryError("#rev_slider_486_1");
    } else {
      revapi486 = tpj("#rev_slider_486_1").show().revolution({
        sliderType: "standard",
        jsFileLocation: "revolution/js/",
        sliderLayout: "fullwidth",
        dottedOverlay: "none",
        delay: 9000,
        navigation: {
          keyboardNavigation: "on",
          keyboard_direction: "horizontal",
          mouseScrollNavigation: "off",
          mouseScrollReverse: "default",
          onHoverStop: "off",
          touch: {
            touchenabled: "on",
            swipe_threshold: 75,
            swipe_min_touches: 1,
            swipe_direction: "horizontal",
            drag_block_vertical: false
          },
          arrows: {
            style: "default",
            enable: false,
            hide_onmobile: true,
            hide_onleave: true,
            tmp: '',
            left: {
              h_align: "left",
              v_align: "center",
              h_offset: 20,
              v_offset: 0
            },
            right: {
              h_align: "right",
              v_align: "center",
              h_offset: 20,
              v_offset: 0
            }
          },
          tabs: {
            style: "erinyen",
            enable: true,
            width: 250,
            height: 100,
            min_width: 250,
            wrapper_padding: 0,
            wrapper_color: "transparent",
            wrapper_opacity: "0",
            tmp: '<div class="tp-tab-title" style="color: #337ab7">{{title}}</div><div class="tp-tab-desc">{{description}}</div>',
            visibleAmount: 3,
            hide_onmobile: true,
            hide_under: 778,
            hide_onleave: false,
            hide_delay: 200,
            direction: "vertical",
            span: false,
            position: "inner",
            space: 10,
            h_align: "right",
            v_align: "center",
            h_offset: 30,
            v_offset: 0
          }
        },
        viewPort: {
          enable: true,
          outof: "pause",
          visible_area: "80%",
          presize: false
        },
        responsiveLevels:[4096,1024,778,480],
        visibilityLevels: [1240, 1024, 778, 480],
        gridwidth: [1240, 1024, 778, 480],
        gridheight: [500, 450, 400, 350],
        lazyType: "none",
        parallax: {
          type: "scroll",
          origo: "enterpoint",
          speed: 400,
          levels: [5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 46, 47, 48, 49, 50, 55],
          type: "scroll",
        },
        shadow: 0,
        spinner: "off",
        stopLoop: "off",
        stopAfterLoops: -1,
        stopAtSlide: -1,
        shuffle: "off",
        autoHeight: "off",
        hideThumbsOnMobile: "off",
        hideSliderAtLimit: 0,
        hideCaptionAtLimit: 0,
        hideAllCaptionAtLilmit: 0,
        debugMode: false,
        fallbacks: {
          simplifyAll: "off",
          nextSlideOnWindowFocus: "off",
          disableFocusListener: false,
        }
      });
    }
  });   /*ready*/
</script>

Slider.html

<div id="rev_slider_486_1_wrapper" class="rev_slider_wrapper fullwidthbanner-container" data-alias="news-gallery36" data-source="gallery" style="margin:0px auto;background-color:#ffffff;padding:0px;margin-top:0px;margin-bottom:0px;">
  <!-- START REVOLUTION SLIDER 5.4.1 fullwidth mode -->
  <div id="rev_slider_486_1" class="rev_slider fullwidthabanner" style="display:none;" data-version="5.4.1">
    <ul>    <!-- SLIDE  -->
      <li data-index="rs-1687" data-transition="parallaxvertical" data-slotamount="default" data-hideafterloop="0" data-hideslideonmobile="off"  data-easein="default" data-easeout="default" data-masterspeed="default"  data-thumb="../../assets/images/newscarousel1-100x50.jpg"  data-rotate="0"  data-fstransition="fade" data-fsmasterspeed="1500" data-fsslotamount="7" data-saveperformance="off"  data-title="A STUDY ON HAPPINESS" data-param1="" data-param2="" data-param3="" data-param4="" data-param5="" data-param6="" data-param7="" data-param8="" data-param9="" data-param10="" data-description="Science says that Women are generally happier">
        <!-- MAIN IMAGE -->
        <img src="https://pea-7f65.kxcdn.com/img/image_db/luxury_hotel_bellevue_losinj_exterior-1920.jpg"  alt=""  data-bgposition="center center" data-bgfit="cover" data-bgrepeat="no-repeat" data-bgparallax="10" class="rev-slidebg" data-no-retina>
        <!-- LAYERS -->

        <!-- LAYER NR. 1 -->
        <div class="tp-caption tp-shape tp-shapewrapper   tp-resizeme"
             id="slide-1687-layer-3"
             data-x="['center','center','center','center']" data-hoffset="['0','0','0','0']"
             data-y="['middle','middle','middle','middle']" data-voffset="['0','0','0','0']"
             data-width="full"
             data-height="full"
             data-whitespace="normal"

             data-type="shape"
             data-basealign="slide"
             data-responsive_offset="on"
             data-responsive="on"
             data-frames='[{"from":"opacity:0;","speed":1500,"to":"o:1;","delay":1000,"ease":"Power3.easeInOut"},{"delay":"wait","speed":1000,"to":"opacity:0;","ease":"Power3.easeInOut"}]'
             data-textAlign="['left','left','left','left']"
             data-paddingtop="[0,0,0,0]"
             data-paddingright="[0,0,0,0]"
             data-paddingbottom="[0,0,0,0]"
             data-paddingleft="[0,0,0,0]"

             style="z-index: 5;text-transform:inherit;background-color:rgba(0, 0, 0, 0.35);border-color:rgba(0, 0, 0, 1.00);border-width:0px;"> </div>

        <!-- LAYER NR. 2 -->
        <div class="tp-caption Newspaper-Title tp-resizeme"
             id="slide-1687-layer-1"
             data-x="['left','left','left','left']" data-hoffset="['50','50','50','30']"
             data-y="['top','top','top','top']" data-voffset="['165','135','105','130']"
             data-fontsize="['50','50','50','30']"
             data-lineheight="['55','55','55','35']"
             data-width="['600','600','600','420']"
             data-height="none"
             data-whitespace="normal"

             data-type="text"
             data-responsive_offset="on"
             data-responsive="on"
             data-frames='[{"from":"y:[-100%];z:0;rX:0deg;rY:0;rZ:0;sX:1;sY:1;skX:0;skY:0;","mask":"x:0px;y:0px;s:inherit;e:inherit;","speed":1500,"to":"o:1;","delay":1000,"ease":"Power3.easeInOut"},{"delay":"wait","speed":1000,"to":"auto:auto;","mask":"x:0;y:0;s:inherit;e:inherit;","ease":"Power3.easeInOut"}]'
             data-textAlign="['left','left','left','left']"
             data-paddingtop="[0,0,0,0]"
             data-paddingright="[0,0,0,0]"
             data-paddingbottom="[10,10,10,10]"
             data-paddingleft="[0,0,0,0]"

             style="z-index: 6; min-width: 600px; max-width: 600px; white-space: normal;text-transform:inherit;">Science says that Women are generally happier </div>

        <!-- LAYER NR. 3 -->
        <div class="tp-caption Newspaper-Subtitle   tp-resizeme"
             id="slide-1687-layer-2"
             data-x="['left','left','left','left']" data-hoffset="['50','50','50','30']"
             data-y="['top','top','top','top']" data-voffset="['140','110','80','100']"
             data-width="none"
             data-height="none"
             data-whitespace="nowrap"

             data-type="text"
             data-responsive_offset="on"
             data-responsive="on"
             data-frames='[{"from":"y:[-100%];z:0;rX:0deg;rY:0;rZ:0;sX:1;sY:1;skX:0;skY:0;","mask":"x:0px;y:0px;s:inherit;e:inherit;","speed":1500,"to":"o:1;","delay":1000,"ease":"Power3.easeInOut"},{"delay":"wait","speed":1000,"to":"auto:auto;","mask":"x:0;y:0;s:inherit;e:inherit;","ease":"Power3.easeInOut"}]'
             data-textAlign="['left','left','left','left']"
             data-paddingtop="[0,0,0,0]"
             data-paddingright="[0,0,0,0]"
             data-paddingbottom="[0,0,0,0]"
             data-paddingleft="[0,0,0,0]"

             style="z-index: 7; white-space: nowrap;text-transform:inherit; color: #337ab7">A STUDY ON HAPPINESS </div>

        <!-- LAYER NR. 4 -->
        <div class="tp-caption Newspaper-Button rev-btn "
             id="slide-1687-layer-5"
             data-x="['left','left','left','left']" data-hoffset="['53','53','53','30']"
             data-y="['top','top','top','top']" data-voffset="['361','331','301','245']"
             data-width="none"
             data-height="none"
             data-whitespace="nowrap"

             data-type="button"
             data-responsive_offset="on"
             data-responsive="on"
             data-frames='[{"from":"y:[-100%];z:0;rX:0deg;rY:0;rZ:0;sX:1;sY:1;skX:0;skY:0;","mask":"x:0px;y:0px;","speed":1500,"to":"o:1;","delay":1000,"ease":"Power3.easeInOut"},{"delay":"wait","speed":1000,"to":"auto:auto;","mask":"x:0;y:0;","ease":"Power3.easeInOut"},{"frame":"hover","speed":"300","ease":"Power1.easeInOut","to":"o:1;rX:0;rY:0;rZ:0;z:0;","style":"c:rgba(0, 0, 0, 1.00);bg:rgba(255, 255, 255, 1.00);bc:rgba(255, 255, 255, 1.00);bw:1px 1px 1px 1px;"}]'
             data-textAlign="['left','left','left','left']"
             data-paddingtop="[12,12,12,12]"
             data-paddingright="[35,35,35,35]"
             data-paddingbottom="[12,12,12,12]"
             data-paddingleft="[35,35,35,35]"

             style="z-index: 8; white-space: nowrap;text-transform:inherit;outline:none;box-shadow:none;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;cursor:pointer;">READ MORE </div>
      </li>
    <li data-index="rs-1690" data-transition="parallaxvertical" data-slotamount="default" data-hideafterloop="0" data-hideslideonmobile="off"  data-easein="default" data-easeout="default" data-masterspeed="default"  data-thumb="../../assets/images/newscarousel5-100x50.jpg"  data-rotate="0"  data-saveperformance="off"  data-title="WORDS OF WISDOM" data-param1="" data-param2="" data-param3="" data-param4="" data-param5="" data-param6="" data-param7="" data-param8="" data-param9="" data-param10="" data-description="Walking with a friend in the dark is better than alone in the light.">
        <!-- MAIN IMAGE -->
        <img src="https://www.andbeyond.com/wp-content/uploads/sites/5/snorkelling-maldives-1920x1080.jpg"  alt=""  data-bgposition="center center" data-bgfit="cover" data-bgrepeat="no-repeat" data-bgparallax="10" class="rev-slidebg" data-no-retina>
        <!-- LAYERS -->

        <!-- LAYER NR. 13 -->
        <div class="tp-caption tp-shape tp-shapewrapper   tp-resizeme"
             id="slide-1690-layer-3"
             data-x="['center','center','center','center']" data-hoffset="['0','0','0','0']"
             data-y="['middle','middle','middle','middle']" data-voffset="['0','0','0','0']"
             data-width="full"
             data-height="full"
             data-whitespace="normal"

             data-type="shape"
             data-basealign="slide"
             data-responsive_offset="on"

             data-frames='[{"from":"opacity:0;","speed":1500,"to":"o:1;","delay":1000,"ease":"Power3.easeInOut"},{"delay":"wait","speed":1000,"to":"opacity:0;","ease":"Power3.easeInOut"}]'
             data-textAlign="['left','left','left','left']"
             data-paddingtop="[0,0,0,0]"
             data-paddingright="[0,0,0,0]"
             data-paddingbottom="[0,0,0,0]"
             data-paddingleft="[0,0,0,0]"

             style="z-index: 17;text-transform:inherit;background-color:rgba(0, 0, 0, 0.35);border-color:rgba(0, 0, 0, 1.00);border-width:0px;"> </div>

        <!-- LAYER NR. 14 -->
        <div class="tp-caption Newspaper-Title   tp-resizeme"
             id="slide-1690-layer-1"
             data-x="['left','left','left','left']" data-hoffset="['50','50','50','30']"
             data-y="['top','top','top','top']" data-voffset="['165','135','105','130']"
             data-fontsize="['50','50','50','30']"
             data-lineheight="['55','55','55','35']"
             data-width="['600','600','600','420']"
             data-height="none"
             data-whitespace="normal"

             data-type="text"
             data-responsive_offset="on"

             data-frames='[{"from":"y:[-100%];z:0;rX:0deg;rY:0;rZ:0;sX:1;sY:1;skX:0;skY:0;","mask":"x:0px;y:0px;","speed":1500,"to":"o:1;","delay":1000,"ease":"Power3.easeInOut"},{"delay":"wait","speed":1000,"to":"auto:auto;","mask":"x:0;y:0;","ease":"Power3.easeInOut"}]'
             data-textAlign="['left','left','left','left']"
             data-paddingtop="[0,0,0,0]"
             data-paddingright="[0,0,0,0]"
             data-paddingbottom="[10,10,10,10]"
             data-paddingleft="[0,0,0,0]"

             style="z-index: 18; min-width: 600px; max-width: 600px; white-space: normal;text-transform:inherit;">Walking with a friend in the dark is better than alone in the light. </div>

        <!-- LAYER NR. 15 -->
        <div class="tp-caption Newspaper-Subtitle   tp-resizeme"
             id="slide-1690-layer-2"
             data-x="['left','left','left','left']" data-hoffset="['50','50','50','30']"
             data-y="['top','top','top','top']" data-voffset="['140','110','80','100']"
             data-width="none"
             data-height="none"
             data-whitespace="nowrap"

             data-type="text"
             data-responsive_offset="on"

             data-frames='[{"from":"y:[-100%];z:0;rX:0deg;rY:0;rZ:0;sX:1;sY:1;skX:0;skY:0;","mask":"x:0px;y:0px;","speed":1500,"to":"o:1;","delay":1000,"ease":"Power3.easeInOut"},{"delay":"wait","speed":1000,"to":"auto:auto;","mask":"x:0;y:0;","ease":"Power3.easeInOut"}]'
             data-textAlign="['left','left','left','left']"
             data-paddingtop="[0,0,0,0]"
             data-paddingright="[0,0,0,0]"
             data-paddingbottom="[0,0,0,0]"
             data-paddingleft="[0,0,0,0]"

             style="z-index: 19; white-space: nowrap;text-transform:inherit;">WORDS OF WISDOM </div>

        <!-- LAYER NR. 16 -->
        <div class="tp-caption Newspaper-Button rev-btn "
             id="slide-1690-layer-5"
             data-x="['left','left','left','left']" data-hoffset="['53','53','53','30']"
             data-y="['top','top','top','top']" data-voffset="['361','331','301','245']"
             data-width="none"
             data-height="none"
             data-whitespace="nowrap"

             data-type="button"
             data-responsive_offset="on"
             data-responsive="off"
             data-frames='[{"from":"y:[-100%];z:0;rX:0deg;rY:0;rZ:0;sX:1;sY:1;skX:0;skY:0;","mask":"x:0px;y:0px;s:inherit;e:inherit;","speed":1500,"to":"o:1;","delay":1000,"ease":"Power3.easeInOut"},{"delay":"wait","speed":1000,"to":"auto:auto;","mask":"x:0;y:0;s:inherit;e:inherit;","ease":"Power3.easeInOut"},{"frame":"hover","speed":"300","ease":"Power1.easeInOut","to":"o:1;rX:0;rY:0;rZ:0;z:0;","style":"c:rgba(0, 0, 0, 1.00);bg:rgba(255, 255, 255, 1.00);bc:rgba(255, 255, 255, 1.00);bw:1px 1px 1px 1px;"}]'
             data-textAlign="['left','left','left','left']"
             data-paddingtop="[12,12,12,12]"
             data-paddingright="[35,35,35,35]"
             data-paddingbottom="[12,12,12,12]"
             data-paddingleft="[35,35,35,35]"

             style="z-index: 20; white-space: nowrap;text-transform:inherit;outline:none;box-shadow:none;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;cursor:pointer;">READ MORE </div>
      </li>
    </ul>
    <div class="tp-bannertimer" style="height: 5px; background-color: rgba(51,122,183,0.5);"></div> </div>
</div><!-- END REVOLUTION SLIDER -->