Question

我是Angular 2的新手，并不熟悉它的语法。我有一个表格，在html页面中有输入和选择，就像这些。

大多数组件在HTML标签中没有任何组件值。但我想从HTML中获取这些值并在我的组件中使用它们。我搜索了很多但没有成功。如何在HTML和ts页面中编写所需的内容？

例如，这是我表单的一部分：

<select class="form-control " id="sel1">
                        <option disabled>type</option>
                        <option>apartment</option>
                        <option>store</option>
                        <option>villa</option>
                        <option>ofiice</option>
                    </select>

我应该注意到，当我想问这个问题时，我在搜索之前就没有得到答案。

Answer 1

经过这么多搜索，我找到了答案：对于html页面中的select和option标记：

<select #selecttypes>
                    <option disabled>type</option>
                    <option *ngFor="let type of types" [value]="type.id">{{type.name}}</option>
</select>
<button (click)=onSubmit($event,selecttypes)>Submit</button>

例如，您希望将这些值放在构建的类中，并使用 typeofbuilding 属性。并在component.ts中：

import {Building} from './building';
export class Component {
constructor(private building: Building) {}
types: any[] = [
{id:1,name:'Apartment'},
{id:2,name:'Store'},
{id:3,name:'Villa'},
{id:4,name:'Office'},
];
onSubmit($event: any,selecttypes: string){
$event.preventDefault();
this.building.typeofbuilding= selecttypes;
console.log(this.building.typeofbuilding)
 }
}

输入标签的

：在html页面中：

<input #rooms name="username" type="text" required>
<button (click)="onSubmit($event,rooms.value)>Submit</button>

在构建类中，还有另一个属性 numofrooms 。所以 component.ts是：

import {Building} from './building';
export class Component {
constructor(private building: Building) {}
onSubmit($event: any,rooms: number){
$event.preventDefault();
this.building.numofrooms= rooms;
console.log(this.building.numofrooms)
 }
}

我希望它会有用。

如何获取HTML标记的值并在Angular 2组件中使用它们？

1 个答案: