我有一个角度2应用程序,有一个名为User的类.此用户具有名为deleted_at的属性,该属性为null或包含日期时间,显然,如果deleted_at属性不为null,则删除用户.这是我的user.ts文件的外观:
User.ts
export class User {
id: number;
email: string;
created_at: string;
first_name: string;
last_name: string;
deleted_at: any;
name() {
if (this.deleted_at === null) {
return this.first_name;
} else {
return 'DELETED';
}
}
}
现在我希望我可以用一个简单的行在模板中调用name:
{{ user.name }}
然而,这不会返回任何内容,如何调用角度2模板中的某些函数？或者这不允许吗？
编辑:清除一些东西,这是我在我的组件user-list.component.ts中使用的类用户,在此组件中处理多个用户.
我的角度应用程序遇到了问题,我使用input作为数组,并在click事件出现时将值推送到数组.但是当数组推送完成时,ngOnChanges不会触发.有没有办法解雇ngOnChange
我的代码是ts文件
@Component({
selector: 'adv-search',
templateUrl: './app/modules/result.html'
})
export class InputComponent {
@Input() metas:any=[];
ngOnChanges() {
console.log(this.metas);
}
}
我的选择标签
<adv-search [metas] = "metaIds"></adv-search>
单击事件代码
insertIds(id:any) {
metaIds.push(id);
}
我在尝试使用嵌套组件时遇到此异常:
EXCEPTION: Error: Uncaught (in promise): TypeError: Cannot set property 'endSourceSpan' of null
XCEPTION: Error: Uncaught (in promise): TypeError: Cannot set property 'endSourceSpan' of nullBrowserDomAdapter.logError @ angular2.dev.js:23877BrowserDomAdapter.logGroup @ angular2.dev.js:23888ExceptionHandler.call @ angular2.dev.js:1317(anonymous function) @ angular2.dev.js:12763schedulerFn @ angular2.dev.js:13167SafeSubscriber.__tryOrUnsub @ Rx.js:10775SafeSubscriber.next @ Rx.js:10730Subscriber._next @ Rx.js:10690Subscriber.next @ Rx.js:10667Subject._finalNext @ Rx.js:11191Subject._next @ Rx.js:11183Subject.next @ Rx.js:11142EventEmitter.emit @ angular2.dev.js:13148NgZone._zoneImpl.ng_zone_impl_1.NgZoneImpl.onError @ angular2.dev.js:13566NgZoneImpl.inner.inner.fork.onHandleError @ angular2.dev.js:2128ZoneDelegate.handleError @ angular2-polyfills.js:336Zone.runGuarded @ angular2-polyfills.js:244drainMicroTaskQueue @ angular2-polyfills.js:495ZoneTask.invoke @ angular2-polyfills.js:434
angular2.dev.js:23877 STACKTRACE:BrowserDomAdapter.logError @ angular2.dev.js:23877ExceptionHandler.call @ angular2.dev.js:1319(anonymous function) @ angular2.dev.js:12763schedulerFn @ angular2.dev.js:13167SafeSubscriber.__tryOrUnsub @ Rx.js:10775SafeSubscriber.next @ Rx.js:10730Subscriber._next @ …函数ngAfterContentInit和 ngAfterViewInit有什么区别？
这是我正在努力工作的代码(角度5):
import { Component, ViewChild, TemplateRef, ViewContainerRef } from '@angular/core';
@Component({
selector: 'vcr',
template: `
<template #tpl>
<h1>ViewContainerRef</h1>
</template>
<div>Some element</div>
<div #container></div>
`,
})
export class VcrCmp {
@ViewChild('container', { read: ViewContainerRef }) _vcr;
@ViewChild('tpl') tpl: TemplateRef<any>;
constructor(
private viewContainerRef: ViewContainerRef
) {
}
ngAfterViewInit() {
console.info(this.viewContainerRef);
console.info(this._vcr);
this._vcr.createEmbeddedView(this.tpl);
this.viewContainerRef.createEmbeddedView(this.tpl);
}
}
问题是我有这个(templateRef.createEmbeddedView is not a function)错误而且不太明白为什么.
此代码基于此示例https://netbasal.com/angular-2-understanding-viewcontainerref-acc183f3b682,所以我想它应该可行.
我究竟做错了什么？
我正在尝试将我的第一个angular2应用程序设置为实验并使用最新的beta版本.
我面临一个奇怪的问题,我在视图中使用的变量在设置超时后没有更新.
@Component({
selector: "my-app",
bindings: []
})
@View({
templateUrl: "templates/main.component.html",
styleUrls: ['styles/out/components/main.component.css']
})
export class MainComponent {
public test2 = "initial text";
constructor() {
setTimeout(() => {
this.test2 = "updated text";
}, 500);
}
}
正如你所看到我有一个名为test2的变量,在构造函数中我设置了500毫秒的超时,我将值更新为"更新文本".
然后在我的视图main.component.html我只是使用:
{{ test2 }}
但是,即使更新部分被命中,该值也永远不会被设置为"更新文本"并永远保留在"初始文本"上.如果我按照angular2教程,他们真的没有给我这个解决方案的答案.想知道是否有人会知道我在这里缺少什么.
编辑:我正在使用的完整代码包括bootstrap和html等
<html>
<head>
<title>Angular 2</title>
<script src="/node_modules/systemjs/dist/system.src.js"></script>
<script src="/node_modules/reflect-metadata/reflect.js"></script>
<script src="/node_modules/angular2/bundles/angular2.dev.js"></script>
<script src="/node_modules/q/q.js"></script>
<script src="/node_modules/jquery/dist/jquery.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="/bower_components/breeze-client/breeze.debug.js"></script>
<script src="/bower_components/datajs/datajs.js"></script>
<script src="/bower_components/bootstrap-less/js/collapse.js"></script>
<script src="/bower_components/bootstrap-less/js/modal.js"></script>
<script src="/bower_components/signalr/jquery.signalR.js"></script>
<script src="http://localhost:64371/signalr/js"></script>
<link href="styles/out/main.css" type="text/css" rel="stylesheet" />
<script>
System.config({ …在Angular 2中,我们有几种方法可以在模板中创建属性绑定.我可以这样做:
<li *ngFor="#course of courses; #i = index" id="someselector-{{i}}">{{course}}</li>
是否可以使用方形brakets语法获得相同的结果？
<li *ngFor="#course of courses; #i = index" [id]="someselector-i">{{course}}</li>
^^^^^^^
how create string concatenation?
谢谢,G.
我正在使用Angular2并从官方网站下载了package.json.当我试图在@Component装饰器中使用"指令"时,我收到此错误.
我附上了我的代码错误:
[ts]
Argument of type '{ selector: string; template: string; directives: string;
}' is not assignable to parameter of type 'ComponentMetadataType'.
Object literal may only specific known properties, and 'directives' does not
exist in type 'ComponentMetadataType'.
(property) directives: string
这是我的代码:
import { Component } from '@angular/core';
import { PeopleListComponent } from './people-list/people-list.component';
@Component({
selector: 'my-app',
template: '<h1>{{ title }}</h1>',
directives: '' //ERROR //NOT ABLE TO RECOGNIZE
})
export class AppComponent {
title = "My title";
}
这是我的package.json:
{
"name": …ERROR TypeError: jit_nodeValue_4(...).$any is not a function
at Object.eval [as handleEvent] (AddNewConnectionsComponent.html:42)
at handleEvent (core.js:13581)
at callWithDebugContext (core.js:15090)
at Object.debugHandleEvent [as handleEvent] (core.js:14677)
at dispatchEvent (core.js:9990)
at eval (core.js:10611)
at HTMLInputElement.eval (platform-browser.js:2628)
at ZoneDelegate.invokeTask (zone.js:421)
at Object.onInvokeTask (core.js:4744)
at ZoneDelegate.invokeTask (zone.js:420)
我在表单组的必填字段上收到此错误.
我的ts文件代码
import { Component, OnInit } from '@angular/core';
import { FormBuilder, Validators, FormGroup, FormControl } from '@angular/forms'
import {ActivatedRoute, Router} from "@angular/router";
@Component({
selector: 'app-add-new-connections',
templateUrl: './add-new-connections.component.html',
styleUrls: ['./add-new-connections.component.scss']
})
export class AddNewConnectionsComponent {
addNewConnectionForm: any;
constructor(public fb: …angular2-forms angular2-template angular angular4-forms angular5
我正在开发一个用angular 4开发的管理面板,并试图集成一个部分来自定义样式,如更改颜色,bg等.我已经开发了一个部分来保存数据库中的设置,使用API将它们作为json加载到json.
现在我尝试使用json中的值生成动态css,我尝试使用主要组件中的以下代码,但它无法正常工作
@Component({
templateUrl: 'card.html',
styles: [`
.card {
height: 70px;
width: 100px;
color: {{css.cardColor}};
}
`],
})
我不确定如何在组件中加载css值并在样式标记中使用它们.我没有找到任何其他解决方案.
另一种方法是使用角度动画概念,但css将是巨大的,并且不可能使用触发器和所有的角度动画来实现它.我相信有一个解决方案,因为它似乎是一个真正的要求,应该由许多其他开发人员完成.
任何帮助都很明显.
编辑:不能使用ngStyle作为几乎所有元素应用于整个应用程序,而不仅仅是特定元素.