为什么这不起作用？http://jsfiddle.net/84C5W/1/
p{
display: none;
}
p.visible:last-of-type {
display: block;
}事实上,我的<p>都不可见.如果我删除了样式表中对".visible"的引用,这确实显示了div中的最后一个<p>,但这不是我想要的.
当然,我只能随时保留一个".visible",但这是一个reveal.js演示文稿,我无法控制javascript.只有样式表......
编辑:好的,很明显.class:last-of-type不起作用.正如@Justus Romijn所说,:last-of-type伪类仅用于选择元素(在我看来这是非常有限的,并且将这个特定的伪类置于一个或多或少无用的状态).
无论如何,我想在这一点上重新解释我的问题:如何选择div中的最后一个元素".visible"？我不想为此使用Javascript.
我刚开始涉足d3,发现学习曲线相当陡峭.这个过程与我习惯的过程完全不同,数学大多数都超出了我的想象.
无论如何,我的项目包含一个力布局,代表系统之间的集成地图.这部分工作得非常好,但是我确实有一个主要的问题,它也出现在Michael Bostocks网站上的强制定向布局演示中:当节点启动时,它们似乎被渲染出画布.在此之后,一些严肃的物理数学正在接管,模拟一个引力,它在一个相当混乱的路径上来回发送节点,直到它们冷静下来并在一些随机坐标上稳定下来.虽然这些动作在第一次运行演示时会逐渐消失,但是当您尝试查看公司网络接口的状态时,它管理的观点和服务器不会保持静止,一段时间后会变得很烦人.
我确信我有这个项目的正确布局设置,因为我确实希望服务器自动布局,我确实希望可视化它们之间的链接.然而,我对万有引力效应感到矛盾.
我想知道; 是否可以手动设置每个节点的初始位置,以便我可以将它们放在更接近重力中心并稍微缩短"反弹时间"？
我正在尝试使用最新材料+ cdk for angular来构建内联可编辑表格.
如何使用mat-table,
[formGroupName]以便可以通过正确的表单路径引用表单字段？
这是我到目前为止所做的:完成StackBlitz示例
模板
<form [formGroup]="form">
<h1>Works</h1>
<div formArrayName="dates" *ngFor="let date of rows.controls; let i = index;">
<div [formGroupName]="i">
<input type="date" formControlName="from" placeholder="From date">
<input type="date" formControlName="to" placeholder="To date">
</div>
</div>
<h1>Wont work</h1>
<table mat-table [dataSource]="dataSource" formArrayName="dates">
<!-- Row definitions -->
<tr mat-header-row *matHeaderRowDef="displayColumns"></tr>
<tr mat-row *matRowDef="let row; let i = index; columns: displayColumns;" [formGroupName]="i"></tr>
<!-- Column definitions -->
<ng-container matColumnDef="from">
<th mat-header-cell *matHeaderCellDef> From </th>
<td mat-cell *matCellDef="let row">
<input …从unix环境运行代码时,我遇到了这个非常烦人的错误.当我在本地运行代码时,这工作正常ng serve,但是当我将代码部署到我的服务器时,此错误会停止所有程序执行:
ERROR TypeError: this.http.get(...).catch is not a function
谷歌的结果表明我应该直接从他们的位置导入rxjs名称空间,而不是通过rxjs/Rx包,但是我得到这个错误.其他结果指出我可能错过了导入rxjs运算符,但它们肯定包含在我的情况下.
我甚至使用DevTools检查了包含的源图,并且操作符包含在浏览器中.
谁能告诉我为什么我会收到这个错误？我正在使用rxjs:^ 5.5.2
这是我的代码.
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/catch';
import 'rxjs/add/observable/throw';
@Injectable()
export class MyService {
constructor(private http: HttpClient) {}
all(): Observable<any> {
return this.http.get<any>('url')
.catch(err => this.handleError(err));
}
handleError(error) {
return Observable.throw(error);
}
}
编辑 基于@ Jota.Toledo的评论,我将使用此方法提供代码:
this.myService.all().subscribe(
result => {
this.isLoading = false;
if (result) {
this.clients = result;
}
}, …我有几个微前端设置，使用“app-shell”类型的应用程序用于域根和第一个路径元素上的每个微前端。每个应用程序都像一个独立的 Angular 应用程序一样使用共享库来重用通用组件和功能。它们生活在自己独立的 docker 容器中，并使用 nginx 代理映射绑定在一起。
mydomain.com/ <- domain root app
/child1 <- micro apps
/child2
/child3
/child4
我想设置一个 Angular Service Worker 来缓存我们所有的资源。
每个应用程序有一个 Service Worker。所以域根应用程序有一个，我们的每个“子应用程序”都有一个。那是; 一个ngsw-config.json每独立角应用程序。
问题
这导致两个软件在每个子应用程序中争夺缓存控制权，用户最终可能会看到旧版本，具体取决于哪个赢了。
有一个服务人员来统治他们，它发生在域的根应用程序，并把它尝试缓存使用的资源每一个“儿童应用”ngsw-config.json的两种assetGroup.resources.files或assetGroup.resources.urls。这些似乎都不会将子应用程序资源映射到其缓存中 - 至少在检查 DevTools AppCache 存储库时不会，尽管网络选项卡确实报告资源文件是从 ServiceWorker 提供的。
问题
这里的问题是应用程序在部署新版本时不再报告。我猜这是因为 angular-cli 无法知道 child-apps build-time 的编译资源的名称。它们必须在运行时缓存。无论如何，我不能完全确定我的任何资源都被缓存了。通过切换到离线模式，没有任何响应。
此外，我们有时仍然会遇到先加载旧版本的域根应用程序，我们必须刷新页面才能获取更新版本。我已经注入了代码来清理我第一次尝试的第二个 service-worker。以下代码删除注册到的所有服务工作线程mydomain.com/childX：
mydomain.com/ <- domain root app
/child1 <- micro apps
/child2
/child3
/child4
我看到的另一个观察结果是，在 DevTools / Application / Cache 存储中，每个新版本哈希值正好有 4 …
我以前使用过ng update --all，因为我想将每个包更新到最新版本，包括那些没有附加原理图的依赖项。
该--all选项现已弃用，将不再起作用。唯一的选择是指定要更新的每个包，我觉得这很乏味。有没有办法将过时的包输出 grep 到ng update单行空格分隔的变量中，然后可以将其输入到新的变量中ng update ${packageList}？
的输出ng update如下：
The installed local Angular CLI version is older than the latest stable version.
Installing a temporary version to perform the update.
Installing packages for tooling via npm.
Installed packages for tooling via npm.
Using package manager: 'npm'
Collecting installed dependencies...
Found 67 dependencies.
We analyzed your package.json, there are some packages to update:
Name Version Command to update
-------------------------------------------------------------------------------------- …我有这样的数据结构:
{
name: 'test',
config: { ... },
prev: {
name: 'test1.1',
config: { ... },
prev: {
name: 'test1.1.1',
config: { ... },
prev: {
name: 'test1.1.1.1',
config: { ... },
prev: undefined
}
}
}
}
该结构可以在'prev'对象中包含任意数量的递归但相同的结构.
我想提取每个孩子的'name'属性.如何使用下划线将其展平以生成结果集,如下所示:
['test', 'test1.1', 'test1.1.1', 'test1.1.1.1']
如果扁平化过程可以返回类似的东西,那就更大了
[
{name: 'test', config: { ... }},
{name: 'test1.1', config: { ... }},
{name: 'test1.1.1', config: { ... }},
{name: 'test1.1.1.1', config: { ... }}
]
我目前的解决方案是这个(这不是最优的.我想使用一个_.chain来生成这个):
var _self = {
flatten: function (obj) { …我从我的应用程序中的第三方REST服务获取结果.这些服务Request header field X-XSRF-TOKEN is not allowed by Access-Control-Allow-Headers in preflight response.失败,
因为angular2已将此标头设置为默认情况下所有请求的标准.
我已经想出如何禁用它:
import { HttpModule, XSRFStrategy } from '@angular/http';
export class NoXSRFStrategy {
configureRequest(req: Request) {
// Remove `x-xsrf-token` from request headers
}
}
@NgModule({
imports: [
HttpModule
],
declarations: [ ],
providers: [{ provide: XSRFStrategy, useFactory: () => new NoXSRFStrategy() }] // !!HACK!!
})
export class AppModule { }
但这适用于模块级别,这意味着它会对所有请求禁用此功能,无论哪个服务提供它们.
我想要的是,为自己决定哪个Http调用应该被剥夺这样的标题,哪些可以继续使用它们.通过上面的解决方案,我必须在单独的模块中隔离服务,并NoXSRFStrategy仅使用for this模块.我没有在其他模块中与其他服务一起测试这个,但我希望这不会设置NoXSRFStrategy为全局请求配置.
只是为了说明我希望能做到的事情:
@Injectable()
export class MyService {
constructor(private http: Http) …我正在使用具有通用登录功能的新 auth0-spa-js 库。我按照https://auth0.com/docs/quickstart/spa/angular2/01-login上的指南进行了操作，但仍然 - 在浏览器重新加载时client.isAuthenticated()将始终返回 false 并将重定向到登录页面。
这是非常令人沮丧的。
编辑：删除了到 github 的链接，并根据要求直接在帖子中添加了我的代码
EDIT2：解决方案发布在这篇文章的底部
auth0 配置
应用
Allowed Callback URLs: http://localhost:3000/callback
Allowed Web Origins: http://localhost:3000
Allowed Logout URLs: http://localhost:3000
Allowed Origins (CORS): http://localhost:3000
JWT Expiration 36000
应用程序接口
Token expiration: 86400
Token Expiration For Browser Flows: 7200
不知道这两个部分（应用程序/Api 配置）之间有什么区别，也不知道我在通过正常的通用登录流程时实际使用了哪些部分，但无论如何我都会发布它们。
app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';
import { AppRoutes } from './app.routing';
import { AppComponent } from …我有一个接收动态内容的组件。其中之一应该是<mat-menu>. 这种作品，但我的“外部”在渲染完成后与我的“内部”mat-menu-items不一样parentMenu（它是未定义的）mat-menu-items。这使得渲染子菜单的行为不符合预期。
小部件.component.ts
@Component({
selector: 'app-widget',
templateUrl: './widget.component.html',
styleUrls: ['./widget.component.scss']
})
export class WidgetComponent implements AfterViewInit {
// The matMenu all the items should be connected to
@ViewChild('actionsMenu', {static: false}) actionsMenu: MatMenu;
// The matMenuItem's inserted into this component externally
@ContentChildren(MatMenuItem) menuItems: QueryList<MatMenuItem>;
constructor() { }
ngAfterViewInit() {
// By listing out these, I find that none of them have `_parentMenu` set.
console.log(this.menuItems);
}
}
小部件.component.html
<!-- The menu trigger -->
<button …angular ×7
javascript ×2
angular-cli ×1
auth0 ×1
bash ×1
css ×1
d3.js ×1
force-layout ×1
grep ×1
html ×1
ngsw-config ×1
observable ×1
rxjs ×1
rxjs5 ×1