- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在制作一个 Ionic Angular 应用。
我有一个显示微调器的页面,直到完成对 API REST 的调用以检索所需的数据。
我的问题是调用完成后,微调器如预期的那样消失了,但数据需要大约 2 秒才能显示在屏幕上。我正在使用变化检测,但即使我将其关闭,它仍然会执行相同的操作。此数据是一个数组。
我的代码如下
home.html
<ng-container *ngIf="loading else show">
<spinner [purple]="true" class="veritcal-center"></spinner>
</ng-container>
<ng-template #show>
<div>
<ng-template #mobile>
<ng-container *ngFor="let work of works">
<book-home-card-mobile [work]="work">
</book-home-card-mobile>
</ng-container>
</ng-template>
</div>
</ng-template>
home.ts
@Component({
selector: 'app-home',
templateUrl: 'home.page.html',
styleUrls: ['home.page.scss'],
changeDetection: ChangeDetectionStrategy.OnPush
})
export class HomePage {
public works: Array<Work>;
public loading: boolean;
constructor(
private worksService: WorksService,
private detector: ChangeDetectorRef
) {
this.works = [];
this.loading = true;
}
ngOnInit() {
this.getWorks();
}
ngAfterViewInit() {
this.detector.detach();
}
private getWorks(): void {
this.loading = true;
this.detector.detectChanges();
this.worksService.getWorks('newer', 0)
.subscribe((response: any) => {
response.forEach((work: Work) => this.works.push(work));
this.loading = false;
this.detector.detectChanges();
});
}
}
book-home-card-mobile.html
<div class="d-inline-block">
<ion-card [class.view]="overlay" [class.waves-effect]="waves" [class.overlay]="overlay" class="material-tooltip-main"
[class.xl-card]="main" [class.sm-card]="!main" data-toggle="tooltip" [title]="tooltip">
<div class="d-inline-block portrait" [class.waves-effect]="details" [style.cursor]="details ? 'pointer' : 'auto'">
<img [src]="work.image">
</div>
<div *ngIf="overlay" class="mask flex-center rgba-stylish-slight"></div>
<div class="d-inline-block details">
<div class="details-container">
<ion-card-header>
<ion-card-title style="white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;" [class.waves-effect]="details" [style.cursor]="details ? 'pointer' : 'auto'">
{{ work.title }}</ion-card-title>
</ion-card-header>
<div class="icons">
<div class="d-inline-block icon">
<ion-icon class="icon-card" name="eye"></ion-icon> <span class="amount">{{ visits }}</span>
</div>
<div class="d-inline-block icon">
<ion-icon name="chatbubbles"></ion-icon> <span class="amount">{{ commentsCount }}</span>
</div>
<div class="d-inline-block icon">
<ion-icon name="heart"></ion-icon> <span class="amount">{{ likes }}</span>
</div>
</div>
<ng-container *ngIf="ellipsis else noEllipsis2">
<div class="description" ellipsis [ellipsis-content]="work.description"></div>
</ng-container>
<ng-template #noEllipsis2>
<div class="description" [class.ellipsis-scroll]="!ellipsis" s>
{{ work.description }}
</div>
</ng-template>
<ion-card-header>
<div class="caret"><i class="fas fa-caret-right"></i></div>
<ion-card-subtitle style="white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;">{{ work.author_nickname }}</ion-card-subtitle>
</ion-card-header>
<div class="categories">
<ng-container *ngFor="let category of work.genres">
<ion-chip>
<ion-label color="secondary">{{ category.name}}</ion-label>
</ion-chip>
</ng-container>
</div>
</div>
</div>
</ion-card>
<br>
</div>
我的应用程序性能也很慢。在选项卡之间切换时查看选项卡的动画。
为了更好地理解,这里有一个视频:https://youtu.be/J_Vl7D10uWY
我觉得是我的书卡组件导致了性能问题,但我不知道为什么。会不会是因为我有太多 if 语句来应用不同的类或显示不同的东西?
谢谢!
最佳答案
好吧,正如我所怀疑的,问题出在我的组件和这个库的使用上,它正在检测我的 View 上的任何变化并重新计算省略号:
关于css - Angular - 查看需要很长时间才能显示更改和性能问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57125949/
这个问题在这里已经有了答案: Isn't an Int64 equal to a long in C#? (2 个答案) 关闭 9 年前。 它不应该是一个整数类型吗? 这样,一些使用 int 的函数
当我遇到一些我想知道的事情时,我正忙着解析一个二进制文件。 Stream.Position属性的类型为Int64或long。为什么是这样?因为流中的位置不能为负,所以使用 UInt64 不是更有意义吗
所以第一部分是我从用户那里获得输入,在本例中,输入是“1”作为从另一个函数接收的字符值。 printf ("\nPlease enter 1, 2, 3 or q: "); option =
我正在尝试使用以下代码从 REST 服务返回 JSON: $categories = $categoriesController->listAll(); if($categories){ hea
我阅读了文档,它说 long 是 %li,但打印输出返回为 -2147024891。是什么赋予了? 最佳答案 您甚至没有提供要打印的号码,但我猜您已经无意中发现了签名打印和未签名打印之间的区别。 使用
我正在创建自定义购物车,我正在构建一个查询,该查询从检索我刚刚保存到购物车表中的 session_id 开始。我知道这个值被保存了,我在 mysql 命令行运行这个查询,它返回我需要的但我没有将值放入
我有一个包含 textView 的 scrollView。如果文本很长并且不适合屏幕,我想增加 textView 高度(我想我可以通过添加 NSLayoutConstraint outlet 并修改它
我有一个基本的数据库处理程序类,其中有一个使用 PDO::FETCH_ASSOC 参数返回结果集的公共(public)方法: public function resultSet() { $th
在后台线程中,我调用 PublishSubject.onNext(); 并在主线程中通过 subscribe(PublishSubject.filter(message -> message.getI
我想知道为什么 Amazon Web Services 控制台登录页面有这么长的 url?为什么不只发布数据而不显示其中包含大量数据的冗长 url。以这种方式实现有什么充分的理由吗? 最佳答案 我认为
这个问题在这里已经有了答案: Can I mix MySQL APIs in PHP? (4 个答案) 关闭 6 年前。 希望我犯了一个快速而明显的错误,我浏览了 previous question
我得到了答案:如果我禁用了cookie,那么使用URL重定向我可以传递JSESSIONID,但我的URL已经很长,因为我使用它有约束的GET方法。那怎么办我应该使用我的 session 吗?我希望我的
目前,当我使用 DOMDocument 对象并调用 saveHTML() 时,它会自动添加一些我不需要的 html 标签。我尝试了此处建议的解决方案 ( https://stackoverflow.c
我是一名优秀的程序员,十分优秀!