我在ng-for循环中有一组单细胞组件.我已经掌握了一切,但我似乎无法找到合适的东西
目前我有一个
setTimeout(() => {
scrollToBottom();
});
但是这不会一直有效,因为图像会异步地向下推动视口.
什么是在angular2中滚动到聊天窗口底部的适当方法？
出于某种原因,我必须在生产模式下运行我的应用程序.这些模式有什么区别？
我在不同的组件中运行两个 MatTables，其中包含来自不同 observable 的数据源。我的一个表排序功能工作正常，但在我的第二个表上，似乎 MatSort 的 @ViewChild 在 ngOnInit 期间没有初始化。
数据呈现，材料表有排序按钮，但功能无所谓。检查了我的导入和模块，一切都很好。
在记录 MatSort 时，一个组件记录一个 MatSort 对象，另一个未定义
排序不起作用。
Feed.component:
import { PostService } from './../../services/post.service';
import { Post } from './../../models/post';
import { Component, OnInit, ViewChild, ChangeDetectorRef} from
'@angular/core';
import { MatSort, MatTableDataSource, MatCheckbox, MatPaginator,
MatTabChangeEvent, MatDialog, MatDialogActions, MatTable} from
"@angular/material"
export class FeedComponent implements OnInit {
@ViewChild(MatSort) sort: MatSort;
@ViewChild(MatPaginator) paginator: MatPaginator;
postData: Post[] =[];
dataSource : MatTableDataSource<any>
currentUser = JSON.parse(localStorage.getItem('user'))
displayedColumns:string[] = ['User','Title', "Description",
"Contact" ]
posts = this.ps.getPosts(); …我对 Angular 4 有点问题。下面的错误被抛出
错误：ExpressionChangedAfterItHasBeenCheckedError：检查后表达式已更改。以前的值：'225px'。当前值：'-21150px'。
这是我的 html：
<div class="channelRow" *ngFor="let epgChannel of channelGroupEpg?.epgChannels">
<div class="epgChannelList">
{{epgChannel.channel.name}}
</div>
<template ngFor let-epgDate [ngForOf]="epgChannel.dates">
<div class="epgEntry"
*ngFor="let epgProgram of epgDate.programs"
[style.width]="getWidth(epgProgram, epgDate.date)"
(click)="selectProgram(epgProgram)"
data-toggle="modal"
data-target="#detailModal">
{{epgProgram.title}}
</div>
</template>
</div>
这就是错误的来源：
getWidth(program: EPGProgram, date: Date) {
let min = this.helperService.getDurationByProgramInMinutes(program);
let startDate = new Date(program.start.getFullYear(), program.start.getMonth(), program.start.getDate(), 0, 0, 0, 0);
let stopDate = new Date(program.stop.getFullYear(), program.stop.getMonth(), program.stop.getDate(), 0, 0, 0, 0);
if (startDate.getTime() !== date.getTime()) {
let minNextDay = this.helperService.getMinutesToNextDay(program.start, date);
min = …正如问题所暗示的那样，我试图找出一种在页面加载后为元素设置动画的方法。我已经找遍了所有地方，但似乎有太多并且无法同时执行此操作，我希望得到一些指导。在移动设备中加载页面后，徽标应该会慢慢朝右上方移动并缩小尺寸（如果有意义的话）。
我正在寻找 Angular 等价物 $(document).ready(function() {}
根据建议，我已经使用过，ngAfterViewInit()但仍然无法正常工作。
以下 index-section.component.html
<section class="index-section">
<div [@logoMoveResize]="load_completed ? 'initial' : 'end'" class="index-logo-wrapper" [class.hideOnLoad]="isTrue">
<figure>
<img src="assets/icons/logo_mobile.svg" alt="urbanwheels logo">
</figure>
</div>
<div class="index-media-wrapper">
<div class="media-container">
<iframe src="https://player.vimeo.com/video/128014070?autoplay=1&color=ffffff&title=0&byline=0&portrait=0" frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe>
</div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Itaque contra est, ac dicitis; Duo Reges: constructio interrete. Videsne quam sit magna dissensio?
</p>
</div>
</section>而 index-section.component.ts
import { Component, OnInit, Inject, ViewChild } from '@angular/core';
import { trigger, state, …这是 stackblitz 代码，当使用该service.ts文件进行 API 调用时，我从子组件发出事件。
我的孩子.comp.ts
import { Component, Output,EventEmitter } from '@angular/core';
import {Service} from './service';
@Component({
selector: 'child',
template: `Child data: {{data}}`
})
export class ChildComponent {
@Output() change = new EventEmitter();
data: string;
constructor(private svc: Service){}
ngOnInit(){
this.change.emit(true);
this.svc.getMsg()
.subscribe( data =>{
this.data = data;
this.change.emit(false);
})
}
}
我的app.comp.ts
import { Component ,ChangeDetectorRef} from '@angular/core';
import {Service} from './service';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class …