我正在使用Angular2，但也很新。
我需要解决这个问题。我有一个选择值为1到4的选项。
根据所选的选项，我想显示与选择选项值一样多的项目，如下图所示。
room number chosen = 1 - 1 item shown
room number chosen = 2 - 2 items shown
关于如何做到的任何想法？
答案 0 :(得分：0)
如上所述：How to apply filters to *ngFor
您只需在元素上应用过滤器即可。 e.g。
<p *ngFor="let feature of content?.keyFeatures | slice:1:maxNumberItems">
{{ feature.description }}
</p>
答案 1 :(得分：0)
您可以使用模板变量，即：
<select id="timesSelect" #timesSelect>
<option *ngFor="let no of availableRoomsNoCollection"
[value]="no">{{no}}</option>
</select>
<div *ngFor="let no of collectionFrom(#timesSelect.value)">
<!--Show items-->
</div>
其中：
availableRoomsNoCollection = this.collectionFrom(availableRoomsNo);
collectionFrom(n: number): number[] {
return Array(n).fill().map((x,i)=>i + 1); // [1,2,3,4,..., n]
}
答案 2 :(得分：0)
我遵循杰米托雷斯的建议。现在看起来很棒！现在唯一的问题是，当我快速更改选择“父”（#changRoomNum）的值时，它会检索此错误
“表达式在检查后发生了变化。之前的值：''。 当前值：'[object Object]'。“
这是我的代码：
search.component.html
<div class="search">
<div class="container">
<h3>
Search your hotel
</h3>
<form [formGroup]="myForm" autocomplete="off" novalidate>
<div class="form-field">
<div class="col-md-12">
<label for="">Insert your destination</label>
<input type="text" class="form-control" formControlName="destination">
<!-- INSERISCO IL MESSAGGIO DI VALIDAZIONE -->
<div *ngIf="myForm.controls.destination.errors && (myForm.controls.destination?.dirty || myForm.controls.destination?.touched)">
<div class="alert alert-danger" *ngIf="myForm.controls.destination.errors?.required">This field is mandatory</div>
</div>
</div>
</div>
<div class="form-field">
<div class="col-md-6">
<label for="">Arrival</label>
<input type="date" class="form-control" formControlName="arrival">
<div *ngIf="myForm.controls.arrival.errors && (myForm.controls.arrival?.dirty || myForm.controls.arrival?.touched)">
<div class="alert alert-danger" *ngIf="myForm.controls.arrival.errors?.required">Fill properly the field</div>
</div>
</div>
<div class="col-md-6">
<label for="">Departure</label>
<input type="date" class="form-control" formControlName="departure">
<div *ngIf="myForm.controls.departure.errors && (myForm.controls.departure?.dirty || myForm.controls.departure?.touched)">
<div class="alert alert-danger" *ngIf="myForm.controls.departure.errors?.required">Fill properly the field</div>
</div>
</div>
</div>
<div class="form-field">
<div class="col-md-3">
<label for="">Rooms Num.</label>
<select #t (change)="changeRoom(t.value)" [(ngModel)]="roomsNums" [ngModelOptions]="{standalone: true}" class="form-control" name="" id="changRoomNum">
<option [selected]="selectedRoom==1" *ngFor="let room of rooms" [value]="room.value">
{{room.value}}
</option>
</select>
</div>
<div class="col-md-3">
<h4>ROOMS N. {{t.value}}</h4>
</div>
<div class="col-md-6" *ngFor="let room of rooms | slice:0:roomsNums">
<div class="col-md-6">
<label for="">Adults</label>
<select class="form-control" name="" id="">
<option selected value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</div>
<div class="col-md-6">
<label for="">Children</label>
<select #childrenNum (change)="callType(childrenNum.value)" class="form-control" name="" id="">
<option *ngFor="let child of children" [value]="child.value">
{{child.value}}
</option>
</select>
<div *ngFor="let child of children | slice:0:childrenNum.value">
<select name="" id="">
<option value=1>1</option>
<option value=2>2</option>
<option value=3>3</option>
<option value=4>4</option>
<option value=5>5</option>
<option value=6>6</option>
<option value=7>7</option>
<option value=8>8</option>
<option value=9>9</option>
<option value=10>10</option>
<option value=11>11</option>
<option value=12>12</option>
</select>
</div>
</div>
</div>
</div>
<div class="form-field">
<div class="col-md-3 col-md-offset-6">
<button (click)="reset()" class="btn btn-danger" type="submit">Reset</button>
</div>
<div class="col-md-3">
<button routerLink="/heroes" [disabled]="!myForm.valid" class="btn btn-primary" type="submit">Search</button>
</div>
</div>
</form>
</div>
</div>
search.component.ts
import { Component, OnInit, OnChanges } from '@angular/core';
import {FormGroup, FormControl, Validators} from '@angular/forms';
@Component({
selector: 'search',
templateUrl: './search.component.html',
styleUrls: ['./search.component.css']
})
export class SearchComponent implements OnInit {
photo= 'http://wallup.net/wp-content/uploads/2016/01/178625-nature-sea-Bora_Bora.jpg'
myForm: FormGroup;
// ISTANZIO I MIEI CAMPI DI VALIDAZIONE DENTRO IL CONSTRUCTOR
constructor() {
this.myForm = new FormGroup({
destination: new FormControl('', [
Validators.required,
Validators.pattern('[A-Za-z]+')
]),
arrival: new FormControl('',[
Validators.required
//Validators.pattern('/^\d{1,2}\.\d{1,2}\.\d{4}$/')
]),
departure: new FormControl('',[
Validators.required,
//Validators.pattern('/^\d{1,2}\.\d{1,2}\.\d{4}$/')
]),
});
}
reset(){
this.myForm.reset();
}
callType(value){
console.log(value);
return value;
}
changeRoom(value){
console.log(value);
return value;
}
rooms = [
{value: '1'},
{value: '2'},
{value: '3'},
{value: '4'}
];
children = [
{value: '1'},
{value: '2'},
{value: '3'},
{value: '4'}
];
selectedRoom = 1;
ngOnInit() {
}
}
另外，它总是显示默认选择父亲的最后一个值，这意味着说（4个房间）