我创建一个自定义指令并将选择器值设置为" [unless-directive] ".
该指令获取一个布尔值并使用它来更改视图,如下所示:
import {Directive, TemplateRef, ViewContainerRef} from 'angular2/core';
@Directive({
selector: '[unless-directive]',
inputs: ['givenBoolean : myDirectiveFunction']
})
export class UnlessDirective {
private _templateRef: TemplateRef;
private _viewContainerRef: ViewContainerRef;
constructor(_templateRef: TemplateRef, _viewContainerRef: ViewContainerRef) {
this._templateRef = _templateRef;
this._viewContainerRef = _viewContainerRef;
}
set myDirectiveFunction(condition: boolean) {
!condition ? this._viewContainerRef.createEmbeddedView(this._templateRef)
: this._viewContainerRef.clear();
}
}
在我的模板中,我试图传递这样的条件:
<div name="customDirective">
<h2>Custom Directive</h2>
<div>
Enter true or false:
<br/>
<input type="text" #condition (keyup)="0"/>
<div *unless-directive [givenBoolean]="condition.value != 'false'">
Only shown if 'false' wad enterded!
</div> …html angular2-forms angular2-directives angular2-template angular
我有这个组件:
export class CategoryDetailComponent implements OnInit{
category: Category;
categoryProducts: Product[];
errorMessage: string;
constructor(private _categoryService: CategoryService, private _productService: ProductService, private _routeParams: RouteParams ) {}
ngOnInit() {
this.getCategoryAndProducts();
}
getCategoryAndProducts() {
let categoryName = this._routeParams.get('name');
let categoryId = this.routeParams.get('id');
var params = new URLSearchParams();
params.set('category', categoryName);
Observable.forkJoin(
this._categoryService.getCategory(categoryId),
this._productService.searchProducts(params)
).subscribe(
data => {
//this displays the expected category's name.
console.log("category's name: "+ data[0].attributes.name)
this.category = data[0];
this.categoryProducts = data[1];
}, error => this.errorMessage = <any>error
)
}
}
在组件的模板中,我有:
<h1>{{category.attributes.name}}</h1>
当我导航到这个组件时,我收到一个错误:
TypeError: …我的角度站点效果很好，但是当您click进入项目时，它会立即加载页面，有时还会有一段flash时间从API中提取图像，id例如1第二次延迟或页面过渡效果。
但是我不确定如何在Angular 2中实现这一点。有兴趣听听别人在做什么吗？
提前致谢
angular2-directives angular2-template angular2-routing angular2-services angular
问题:<p>元素不起作用.(Angular解析器无法呈现标记p)
在官方教程的5 Min Quickstart文档中,此代码段工作正常:
...
template: `
<div>
<ul>
<li>1</li>
<li>2</li>
</ul>
</div>`
...
但是这段代码不起作用:
...
template: `
<p>
<ul>
<li>1</li>
<li>2</li>
</ul>
</p>`
...
FireBug中的错误如下:
EXCEPTION: Template parse errors:
Unexpected closing tag "p" ("
<li>2</li>
</ul>
[ERROR ->]</p>
</div>"): AppComponent@14:14
有人可以解释为什么会这样吗？
我有一个名为search的管道，我想将返回的管道值存储在这样的变量中（在我的模板中）
let searchedItems = items | search
有任何想法吗？
我有一个通过一个可观察到的对象得到的对象compModel.它给了我一个大的配置对象,我需要用它来调整dom片段.我想要做的一件事是根据这个模型选中/取消选中一些复选框,但我无法访问它们各自的属性.
<input type="checkbox" checked="{{compModel | async}}">
null并且不会在任何时候检查该框.我认为这被解释为将obj一个observable 的属性传递给异步管道,它返回null因为observable本身没有obj,所以未来的数据会这样做.<input type="checkbox" checked="{{compModel.obj | async}}">
Cannot read property boolean of undefined.这里的布尔值就是我所追求的.我怎么得到它？<input type="checkbox" checked="{{compModel.obj.boolean | async}}">
将字符串转换为数字角2单向绑定
[longitude]="loc.location.lng">
loc.location.lng是字符串，我需要将它们转换为number。但是仍然无法按我期望的那样工作。在插值中，它起作用了，但在这种情况下不起作用。谢谢
我正在使用我在网上找到的主要使用css创建的数据表.在其中一列中有一个css数据属性"data-title",它被赋予一个字符串.
<td data-title="someString">
当我输入一个字符串时,列内的样式按预期工作.当我尝试绑定到对象字符串时,绑定不会像我期望的那样工作.我试过了
<td data-title="object.someString">
它只显示文字'object.someString'而我试过了
<td data-title="{{object.someString}}">
什么都没显示(空白).知道为什么我的绑定在这里不起作用吗？
CSS:
.responsive-table tbody td[data-title]:before {
content: attr(data-title);
float: left;
font-size: .9em;
color: #565248;
}
@media (min-width: 48em) {
.responsive-table tbody td[data-title]:before {
content: none;
}
}
我想在文本框的输入更改时调用类型脚本函数，它对我有用。但是它会在每次更改时调用，我想在文本框中的最小字符数为5时调用。
export class StudentMaintenanceComponent implements OnInit {
@Component({
selector: 'app-student-management',
template: `<input placeholder="" class="form-control" type="text" [maxlength]="5" (input)="SearchData($event.target.value)">`,
styleUrls: ['./app-student-management.css']
})
SearchData(_no: string) { // should be called when minimum no of character are 5 in the text field.
console.log(_no);
}
}
我有一个像这样的json数组。
[
{
"variations": {
"title": {
"newValue": "test new value1",
"oldValue": "test old value1"
}
}
},
{
"variations": {
"data": {
"newValue": "new data",
"oldValue": "httpold data"
},
"length": {
"newValue": "48",
"oldValue": "9.00"
}
}
}
]
从这个我想得到的HTML的变化的长度，还渲染和值来查看。
<table class="table table-bordered table-hover">
<thead class="table-title">
<tr>
<th class="text-center">Field count</th>
<th class="text-center">Field Name</th>
<th class="text-center">Old Value</th>
<th class="text-center">New Value</th>
</tr>
</thead>
<tbody *ngFor="let data of datas">
<tr>
<td class="text-left" rowspan="2">{{data.variations.length}}</td>
<td class="text-left" rowspan="2"></td>
<td class="text-left" rowspan="2"></td>
</tr>
<tr>
</tr> …