我在Angular2中创建一个由Object数组而不是字符串支持的选择时遇到了麻烦.我知道如何使用ngOptions在AngularJS中执行此操作,但它似乎不适用于Angular2(我使用的是alpha 42).
在下面的示例中,我有四个选择,但只有两个选择.
如果这是预期的方式,我可以做#4,但它看起来很笨重.还有另一种方法吗？我是不是太早了？我做了些傻事吗？
import {Component, FORM_DIRECTIVES, NgFor} from 'angular2/angular2';
interface TestObject {
name:string;
value:number;
}
@Component({
selector: 'app',
template: `
<h4>Select String</h4>
<select [(ng-model)]="strValue">
<option *ng-for="#o of strArray" [value]="o">{{o}}</option>
</select>
<h4>Select Object via 2-way binding</h4>
<select [(ng-model)]="objValue1">
<option *ng-for="#o of objArray" [value]="o">{{o.name}}</option>
</select>
<h4>Select Object via event</h4>
<select [ng-model]="objValue2" (change)="updateObjValue2($event)">
<option *ng-for="#o of objArray" [value]="o">{{o.name}}</option>
</select>
<h4>Select Object via string</h4>
<select [ng-model]="objValue3.name" (change)="updateObjValue3($event)"> …我想在我的模板中创建一个项目列表,用逗号分隔,但我不希望最后一个项目有逗号:
one, two, three
如何使用Angular 2的模板语法实现此目的？
我正在尝试将父组件注入子组件.我认为这很简单 - 只需在子代中指定/注入父组件constructor():
constructor(private _parent:AppComponent) {} // child component constructor
我收到以下错误:
EXCEPTION:无法解析ChildComponent(？)的所有参数.确保它们都具有有效的类型或注释.
我错过了什么？
ChildComponent:
import {Component} from 'angular2/core';
import {AppComponent} from './app.component';
@Component({
selector: 'child',
template: `<p>child</p>`
})
export class ChildComponent {
constructor(private _parent:AppComponent) {}
}
AppComponent:
import {Component} from 'angular2/core';
import {ChildComponent} from './child.component';
@Component({
selector: 'my-app',
template: `{{title}} <child></child>
`,
directives: [ChildComponent]
})
export class AppComponent {
title = "Angular 2 - inject parent";
constructor() { console.clear(); }
}
我正在尝试使用ng-click附加到更新我的模型<p>.
我有一个赋值表达式没有问题外的ng-repeat,或者与调用方法的范围内的ng-repeat.不过,如果我使用赋值里面的ng-repeat,它似乎被忽略.我没有在Firefox控制台中看到任何消息报告,但是没有尝试设置断点以查看事件是否被触发.
<!DOCTYPE html>
<html>
<head>
<title>Test of ng-click</title>
<script type='text/javascript' src='http://code.angularjs.org/1.1.1/angular.js'></script>
<script type='text/javascript'>//<![CDATA[
function MyCtrl($scope) {
$scope.selected = "";
$scope.defaultValue = "test";
$scope.values = ["foo", "bar", "baz"];
$scope.doSelect = function(val) {
$scope.selected = val;
}
}
//]]>
</script>
</head>
<body ng-app>
<div ng-controller='MyCtrl'>
<p>Selected = {{selected}}</p>
<hr/>
<p ng-click='selected = defaultValue'>Click me</p>
<hr/>
<p ng-repeat='value in values' ng-click='selected = value'>{{value}}</p>
<hr/>
<p ng-repeat='value …如何跳过数组中的第一个索引？
<li *ngFor="#user of users">
{{ user.name }} is {{ user.age }} years old.
</li>
在javascript中,我们可以这样做:
["a string", 10, {x : 1}, function() {}].push("another value");
什么是Scala等价物？
我需要li在Angular2的列表中为每个项重复几个元素.在角度1.x我使用ng-repeat-start和ng-repeat-end为此.我无法在Angular 2中找到正确的方法.有一些较旧的博客文章,但他们的建议不适用于最新的Angular2测试版.
<li>应该为每个类别重复所有元素:(我通常会对属性进行处理*ngFor="#category of categories"- 但我找不到放在哪里...
救命？
<ul class="dropdown-menu" role="menu">
<li class="dropdown-header">
{{ category.title }}
</li>
<li>
<a href="{{ '/music/' + tag.keyword }}" *ngFor="#tag of category.tags" [hidden]="tag.deleted === 1">{{ tag.tag_title_da }}</a>
</li>
<li class="divider"></li>
<li class="dropdown-header">Alle musikstykker</li>
<li><a href="/music/all">Alle musikstykker</a></li>
</ul>
需要访问属性children元素.家长:
<div>
<shipment-detail #myCarousel ></shipment-detail>
</div>
@Component({
selector: "testProject",
templateUrl: "app/partials/Main.html",
directives: [ShipmentDetail] })
class AppComponent {
getChildrenProperty() {
// I want to get access to "shipment"
}
}
儿童:
@Component({
selector: "shipment-detail",
})
export class ShipmentDetail {
shipment: Shipment;
}
我正在使用angular2路由器.
要绘制网址的面包屑,请说site.com/a/b/c/15我执行以下操作:
site.com/a/b/c/15并获得与路线相关联的漂亮名称site.com/a/b/c并获得与路线相关联的漂亮名称site.com/a/b并获得与路线相关联的漂亮名称site.com/a并获得与路线相关联的漂亮名称所以我想说我有以下路线:
{ path: 'a', component: A, data:{prettyName: 'I am A'}}
{ path: 'b', component: B, data:{prettyName: 'I am B'}},
{ path: 'c', component: C, data:{prettyName: 'I am C'}},
我的过程的结果将是一个包含的数组,{"I am C", "I am B", "I am C"}并且由于我可以显示一个很好的面包屑"I am A > I am B > I am C"来解释当前的路线.
这用于使用路由器弃用的操作
this.router.recognize(url).then((instruction) => {
instruction.component.routeData.get('prettyName') // Would return 'I am ..'
但是现在; 使用最后一个路由器,我无法再处理这个识别逻辑. …