我是Angular的新手,并试图通过新的做事方式加快速度.
我想将一个select元素绑定到一个对象列表 - 这很容易:
@Component({
selector: 'myApp',
template: `<h1>My Application</h1>
<select [(ngModel)]="selectedValue">
<option *ngFor="#c of countries" value="c.id">{{c.name}}</option>
</select>`
})
export class AppComponent{
countries = [
{id: 1, name: "United States"},
{id: 2, name: "Australia"}
{id: 3, name: "Canada"},
{id: 4, name: "Brazil"},
{id: 5, name: "England"}
];
selectedValue = null;
}
在这种情况下,看起来selectedValue将是一个数字 - 所选项目的ID.
但是,我实际上想要绑定到country对象本身,以便selectedValue是对象而不仅仅是id.我尝试改变选项的值,如下所示:
<option *ngFor="#c of countries" value="c">{{c.name}}</option>
但这似乎不起作用.它似乎将一个对象放在我的selectedValue中 - 但不是我期待的对象.您可以在我的Plunker示例中看到这一点.
我也尝试绑定到change事件,以便我可以根据所选的id自己设置对象; 但是,看起来更改事件在更新绑定的ngModel之前触发 - 这意味着我无法访问此时新选择的值.
是否有一种干净的方法将选择元素绑定到具有Angular 2的对象？
我正在玩打字稿,我正在尝试创建一个脚本,在输入框中输入文本时将更新p元素.
html看起来如下:
<html>
<head>
</head>
<body>
<p id="greet"></p>
<form>
<input id="name" type="text" name="name" value="" onkeyup="greet('name')" />
</form>
</body>
<script src="greeter.js"></script>
</html>
和greeter.ts文件:
function greeter(person)
{
return "Hello, " + person;
}
function greet(elementId)
{
var inputValue = document.getElementById(elementId).value;
if (inputValue.trim() == "")
inputValue = "World";
document.getElementById("greet").innerText = greeter(inputValue);
}
当我编译时,tsc我得到以下"错误":
/home/bjarkef/sandbox/greeter.ts(8,53): The property 'value' does not exist on value of type 'HTMLElement'
但是编译器确实输出了一个javascript文件,它在chrome中运行得很好.
我怎么会得到这个错误？我该如何解决？
另外,在哪里可以'HTMLElement'根据打字稿查找哪些属性有效？
请注意我对javascript和打字稿很新,所以我可能会遗漏一些明显的东西.:)