我误解了css变量的功能吗？我试图将背景图像URL传递给这样的变量:当我传递像颜色等简单的东西时,它似乎工作得很好......
:root {
--slide-1: url(/static/images/slideshow/slide1.jpg) ;
--slide-2: url(/static/images/slideshow/slide2.jpg) ;
--slide-3: url(/static/images/slideshow/slide3.jpg) ;
--slide-4: url(/static/images/slideshow/slide4.jpg) ;
--slide-5: url(/static/images/slideshow/slide5.jpg) ;
}
//and then
.jumbotron > .jumbotron-slideshow:nth-child(1) {
background-image: var(--slide-1);
}
.jumbotron > .jumbotron-slideshow:nth-child(2) {
animation-delay: 6s;
background-image: var(--slide-2);
}
.jumbotron > .jumbotron-slideshow:nth-child(3) {
animation-delay: 12s;
background-image: var(--slide-3);
}
.jumbotron > .jumbotron-slideshow:nth-child(4) {
animation-delay: 18s;
background-image: var(--slide-4);
}
.jumbotron > .jumbotron-slideshow:nth-child(5) {
animation-delay: 24s;
background-image: var(--slide-5);
}
我正在尝试在我的 angular 项目中解析 base64 的文件输入。
在我的模板中，我有：
<input type="file" (change)="handleUpload($event)">
然后我的功能是这样的：
handleUpload(event) {
const file = event.target.files[0];
const reader = new FileReader();
reader.readAsDataURL(event);
reader.onload = () => {
console.log(reader.result);
};
}
这给了我这个错误：
ERROR TypeError: Failed to execute 'readAsDataURL' on 'FileReader': parameter 1 is not of type 'Blob'.
at _global.(anonymous function).(anonymous function) [as readAsDataURL] (webpack-internal:///./node_modules/zone.js/dist/zone.js:1323:60)
at AccountFormComponent.handleUpload (account-form.component.ts:212)
at Object.eval [as handleEvent] (AccountFormComponent.html:344)
at handleEvent (core.js:13547)
at callWithDebugContext (core.js:15056)
at Object.debugHandleEvent [as handleEvent] (core.js:14643)
at dispatchEvent (core.js:9962)
at eval (core.js:10587)
at HTMLInputElement.eval …我的组件出现错误TypeError: control.setParent is not a function。使用 FormBuilder，我构建了一个 FormArray 并在构造函数中启动表单组。所以据我了解，这个错误是说表单控件尚未设置。不确定这对我有意义
这是到目前为止的组件...
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, FormArray } from '@angular/forms';
import { Observable } from 'rxjs/Observable';
import { tap, map } from 'rxjs/operators';
import { MediaListService } from '../../services/media-list.service';
import { ActivatedRoute } from '@angular/router';
@Component({
selector: 'app-media-list-builder',
templateUrl: './media-list-builder.component.html'
})
export class MediaListBuilderComponent implements OnInit {
mediaListForm: FormGroup;
contactsDataSource$: Observable<any>;
mediaListDataSource$: Observable<any>;
mediaListId: number;
mediaList: any;
searchText = '';
searchKey = 'name'; …我试图将show我的导航栏组件的值传递给我的应用程序根组件,我用它来形成应用程序的基本布局.在navbar-component.ts我有这个:
import { Component, Output, EventEmitter } from '@angular/core';
@Component({
selector: 'app-navbar',
templateUrl: './navbar.component.html'
})
export class NavbarComponent {
public show = true;
@Output() showEvent = new EventEmitter<boolean>();
constructor() { }
sendToggle() {
if (this.show === true) {
this.show = false;
} else {
this.show = true;
}
this.showEvent.emit(this.show);
}
}
然后在模板中我有这个:
<button type="button" class="btn btn-transparent ml-2 mr-auto"
(click)="sendToggle()">
<span class="fa fa-bars"></span>{{ show }}
</button>
我添加的{{ show }}只是为了让我可以看到show每种sendToggle()方法的变化状态.
然后我设置app-component.ts …
我无法使用 nvm 安装 v10 节点
sandra@TENDesign-ubunto:~/development/lakefrontcargo-v2-cloud-functions$ nvm install 10.15.1
Version '10.15.1' not found - try `nvm ls-remote` to browse available versions.
sandra@TENDesign-ubunto:~/development/lakefrontcargo-v2-cloud-functions$ nvm ls-remote
<html
iojs-v1.0.0
iojs-v1.0.1
iojs-v1.0.2
iojs-v1.0.3
iojs-v1.0.4
iojs-v1.1.0
iojs-v1.2.0
iojs-v1.3.0
iojs-v1.4.1
iojs-v1.4.2
iojs-v1.4.3
iojs-v1.5.0
iojs-v1.5.1
iojs-v1.6.0
iojs-v1.6.1
iojs-v1.6.2
iojs-v1.6.3
iojs-v1.6.4
iojs-v1.7.1
iojs-v1.8.1
iojs-v1.8.2
iojs-v1.8.3
iojs-v1.8.4
iojs-v2.0.0
iojs-v2.0.1
iojs-v2.0.2
iojs-v2.1.0
iojs-v2.2.0
iojs-v2.2.1
iojs-v2.3.0
iojs-v2.3.1
iojs-v2.3.2
iojs-v2.3.3
iojs-v2.3.4
iojs-v2.4.0
iojs-v2.5.0
iojs-v3.0.0
iojs-v3.1.0
iojs-v3.2.0
iojs-v3.3.0
-> iojs-v3.3.1
正如您所看到的，当我尝试安装 10.15.1 时，我得到版本未找到。当我运行 ls-remote 时，它列出了一些相当旧的东西。我的设置中是否遗漏了某些内容？
好的,所以我不得不承认,即使在BS3中,我也一直在努力工作.但我希望在折叠容器外部保持持久性的导航栏链接.
这就是我现在所拥有的:
<nav class="navbar fixed-top navbar-expand-lg navbar-template">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav ml-auto">
<li class="nav-item"><a class="nav-link" href="#">Home</a></li>
<li class="nav-item"><a class="nav-link" href="#">Features</a></li>
<li class="nav-item"><a class="nav-link" href="#">Pricing</a></li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown">Dropdown link</a>
<div class="dropdown-menu dropdown-menu-right">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
</ul>
</div>
<ul class="navbar-nav">
<li class="nav-item"><a class="nav-link" href="#"><span class="fa fa-facebook"></span></a></li>
<li class="nav-item"><a class="nav-link" href="#"><span class="fa fa-twitter"></span></a></li> …我有一个如下所示的div结构：
<div class="jumbotron jumbotron-fluid bg-inverse text-white">
<div class="container">
<div class="row align-items-center">
<div class="slide col-md-8">
...
</div>
<div class="slide col-md-8">
...
</div>
</div>
</div>
</div>
在我的Sass文件中，我试图隐藏除第一个类型以外的所有内容.slide：
.jumbotron {
background-color: $white;
color: $black;
margin-bottom: 0;
min-height: 100vh - $navbar-height;
.slide {
&:not(:first-of-type) {
display: none;
}
}
}
这似乎是在隐藏所有.slidediv，而不是按预期隐藏“除第一个以外的所有”，不是吗？
这确实是我第一次使用Chart.js，并将其导入到Angular组件中。我现在尝试仅创建一个简单的条形图。我的控制台出现以下错误：
core.controller.js:118 Failed to create chart: can't acquire context from the given item
不知道我在做什么错！
这是我的组件的TS文件：
import { Component, OnInit } from '@angular/core';
import { Chart } from 'chart.js';
import { data } from './data';
@Component({
selector: 'app-propel-factor',
templateUrl: './propel-factor.component.html'
})
export class PropelFactorComponent implements OnInit {
chart = [];
labels: any = [];
data: any = [];
constructor() { }
ngOnInit() {
data.forEach(item => {
this.labels.push(item.name);
this.data.push(item.value);
});
this.chart = new Chart('canvas', {
type: 'bar',
labels: this.labels,
data: {
labels: …我正在尝试在我的组件中创建简单的拖放方法，但似乎无法正常工作。这真的是我第一次处理拖放类型的东西，所以不确定我是否采取了正确的方法。刚刚采用了 W3 的教程。有什么建议？id 将是简单地获取被拖动元素的 id 和删除并附加元素的 id ......
模板：
<div id="opened" class="board-body" (ondrop)="drop($event)" (ondragover)="allowDrop($event)">
<div class="card bg-light-blue mb-2" id="drag1" draggable="true" (ondragstart)="drag($event)">
draggable card 1
</div>
</div>
<div id="responded" class="board-body" (ondrop)="drop($event)" (ondragover)="allowDrop($event)">
<div class="card bg-light-blue mb-2" id="drag2" draggable="true" (ondragstart)="drag($event)">
draggable card 2
</div>
</div>
成分：
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-funnel-grid',
templateUrl: './funnel-grid.component.html',
styleUrls: ['./funnel-grid.component.scss']
})
export class FunnelGridComponent implements OnInit {
constructor() { }
ngOnInit() {
}
allowDrop(e) {
e.preventDefault();
}
drag(e) {
e.dataTransfer.setData('text', e.target.id);
console.log(e.target.id); …我需要获取没有 ID 的元素的 offsetTop，因此我按名称获取选择器：
const element = document.getElementsByTagName('bs-datepicker-container');
然后，如果我到 console.log 的位置，element我可以看到偏移量 top 是 -55，这是正确的，元素离屏幕大约 55 个像素。
但是，当我按如下方式专门针对元素时：
console.log(element['0'].offsetTop);
我突然看到 949 的输出。考虑到我的屏幕尺寸是 1080，这意味着 offsetTop 几乎在我的屏幕底部，但事实并非如此。