如何为ngClass使用多个条件?例:
<section [ngClass]="[menu1 ? 'class1' : '' || menu2 ? 'class1' : '' || (something && (menu1 || menu2)) ? 'class2' : '']">
Run Code Online (Sandbox Code Playgroud)
这样的事情.我有2个菜单的同一个班级,当其中一个菜单是真的并且'某事'是真的时我需要上课.希望我解释得很好
我需要在一段时间后在我的Angular 6应用程序中的线图中显示一些数据,所以让我们说每个333ms显示一些数据.我正在显示最多30秒注册的数据,因此每个图表数据最多可以持续30秒.它必须从按钮单击开始.
以下是我为测试目的创建的一些测试数据:
test_data = {
'222': {
joy: 66.5057373046875,
fear: 1.0003513832343742,
anger: 2.000018799044483,
disgust: 3.004251452162862,
sadness: 4.0001135088386945,
contempt: 5.001299204188399,
surprise: 6.203749045729637
},
'238': {
joy: 97.06363677978516,
fear: 17.500137131541123,
anger: 27.00000593749519,
disgust: 6.001324078417383,
sadness: 21.000043172625737,
contempt: 21.00033742573578,
surprise: 32.62530106306076
},
'722': {
joy: 66.5057373046875,
fear: 60.000351383234374,
anger: 70.00001879904448,
disgust: 10.004251452162862,
sadness: 92.0001135088387,
contempt: 40.0012992041884,
surprise: 50.20374904572964
},
'838': {
joy: 97.06363677978516,
fear: 15.000137131541123,
anger: 64.50000593749519,
disgust: 24.501324078417383,
sadness: 31.500043172625737,
contempt: 18.50033742573578,
surprise: 6.2048268765211105
},
'1722': {
joy: 66.5057373046875,
fear: 54.000351383234374, …Run Code Online (Sandbox Code Playgroud) 我在我的 Angular 2 应用程序中添加了 Froala 编辑器并且它可以工作,我只是找不到如何自定义工具栏,显示我想要的按钮(粗体、斜体、下划线等),有什么帮助吗?
我在多个地方发现了这个问题,但没有明确的解决方案。只有一个 get 请求不起作用(401 Unauthorized),但是当我查看调试器时,代码工作正常,并且所有其他请求都工作正常。Chrome 和 Firefox 也可以正常工作,没有任何问题。
这是我的拦截器服务:
@Injectable()
export class TokenInterceptor implements HttpInterceptor {
constructor(public auth: LoginService) {}
intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
// Get the auth header from the service.
let authHeader = this.auth.getToken();
if (!authHeader) {
authHeader = '';
}
let authReq: any;
// Clone the request to add the new header.
if (this.auth.isAuthenticated()) {
authHeader = authHeader.replace(/^"(.*)"$/, '$1'); // Remove quotes from token start/end.
authReq = request.clone({headers: request.headers.set('Authorization', 'Bearer ' + authHeader)});
} else { …Run Code Online (Sandbox Code Playgroud) 我有一个带有一些子 div 的 div,我用作选项卡,并且我的父 div 具有水平滚动(我将它用于移动视图,因此宽度较小)。像这样的东西:
.parent {
display: flex;
overflow-x: auto;
padding: 15px 0 20px;
}
.tab {
font-size: 15px;
text-transform: uppercase;
padding: 10px 40px;
color: #a4b5bf;
white-space: nowrap;
}Run Code Online (Sandbox Code Playgroud)
<div class="parent">
<div class="tab">Tab 1</div>
<div class="tab">Tab 2</div>
<div class="tab">Tab 3</div>
<div class="tab">Tab 4</div>
</div>Run Code Online (Sandbox Code Playgroud)
问题是,当我想在最后一个元素上设置边距时,它不会从 div 的末尾移动。他得到了边距,你在检查器中看到它,但它只是不动。
我正在尝试实施 PrimeNG 烤面包机,但它没有显示,不确定我错过了什么。我按照这样的步骤操作:
npm install primeng --save
npm install primeicons --save
Run Code Online (Sandbox Code Playgroud)
我向 angular-cli 样式添加了以下内容:
"node_modules/primeicons/primeicons.css",
"node_modules/primeng/resources/themes/nova-light/theme.css",
"node_modules/primeng/resources/primeng.min.css"
Run Code Online (Sandbox Code Playgroud)
在我的 app.module.ts 中我导入了
ToastModule,
BrowserAnimationsModule
Run Code Online (Sandbox Code Playgroud)
在提供者中,我有来自 的 MessageService primeng/api。
现在,在我的 http 请求服务中,我添加了这段代码:
get(url: string, showSuccessToast?: boolean, toastMessage?: string) {
const result = this.http.get(url)
.pipe(map((response: Response) => {
if (showSuccessToast) {
this.messageService.add({severity: 'success', summary: 'Success!', detail: toastMessage});
}
return response;
}),
catchError(response => this.handleError(response))
);
return result;
}
Run Code Online (Sandbox Code Playgroud)
在我发出 get 请求的组件服务中,我为 showSuccess 添加了 true ,并为消息添加了一个字符串。
app.component.ts我在其中添加了:<p-toast></p-toast>
没有抛出错误,只是没有弹出烤面包机......
我有一个包含大量弹出窗口的应用,我将其定位为:
.popup {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
Run Code Online (Sandbox Code Playgroud)
但某些弹出窗口是模糊的。这种转变:翻译是杀死它的原因。据我所知,这是镀铬问题,但是解决它的最佳方法是什么?
我为我的垂直导航创建了一个侧边菜单,所以我在点击时切换侧边菜单.我需要在菜单外的任何地方点击该菜单.我试过安装:
https://github.com/chliebel/angular2-click-outside
但是由于某种原因它不起作用,我跑npm install,添加
(clickOutside)="close()"
Run Code Online (Sandbox Code Playgroud)
到我的组件或侧面菜单包装器,没有任何反应.
有什么帮助吗?指令代码:
import {Directive, ElementRef, Output, EventEmitter, HostListener} from '@angular/core';
@Directive({
selector: '[clickOutside]'
})
export class ClickOutsideDirective {
constructor(private _elementRef: ElementRef) {
}
@Output()
public clickOutside = new EventEmitter<MouseEvent>();
@HostListener('document:click', ['$event', '$event.target'])
public onClick(event: MouseEvent, targetElement: HTMLElement): void {
if (!targetElement) {
return;
}
const clickedInside = this._elementRef.nativeElement.contains(targetElement);
if (!clickedInside) {
this.clickOutside.emit(event);
}
}
}
Run Code Online (Sandbox Code Playgroud) 我想在我的登录/注册页面上隐藏我的布局,但是我不确定如何正确地进行布局。我不想在这些页面上使用覆盖层来覆盖布局,并且我不应该通过询问它是什么路线并在遇到某些路线时隐藏元素来完成此操作。
我的布局组件:
<div class="body-wrapper">
<div class="content">
<app-header></app-header>
<router-outlet></router-outlet>
</div>
</div>
Run Code Online (Sandbox Code Playgroud)
因此,我需要路由器出口仅显示登录组件,而不显示其他html。
我正在尝试从对象中获取前 2 个最高值:
emotions = {
joy: 52,
surprise: 22,
contempt: 0,
sadness: 98,
fear: 60,
disgust: 20,
anger: 1,
};
Run Code Online (Sandbox Code Playgroud)
我知道我可以使用Math.max()所有这些值,但在这个例子中它只会返回悲伤的值。我能以某种方式获得带有标签(悲伤)和价值(98)的前 2 名吗?