从api获取数据后出现角度* ngIf（渲染）问题
我对*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>
我希望有人能解决这个问题
2 个答案:
答案 0 :(得分：1)
您可能对变更检测有疑问
尝试以下
constructor(private readonly changeDetectorRef: ChangeDetectorRef){}
this.getAllPlaces().then(() => {
this.isLoading = false;
this.changeDetectorRef.markForCheck();
});
答案 1 :(得分：0)
@PushpikaWan不幸的是，它没有用：（
我认为这取决于脚本文件，因为ng if在滑块html中也不起作用。
但是我不知道为什么，我已经在所有标签中测试了ngIf。
全局index.html
中的脚本<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 -->
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？