Angular HTML模板-如何使用数字输入的当前值作为数组切片的上限？

Question

这可能非常简单，但我无法弄清楚。我有一个数字输入，我想使用该数字输入的当前值来显示/隐藏列表中一定数量的项目。模板看起来像这样：

<input type="number" value="10" step="10" min="10" style="width: 4em" (change)="showNThings = this.value">
...
<div *ngFor="let item of myArray | slice:0:showNThings">

最初看起来这段代码有效（显示了10个项目），但我认为仅是因为this.value引用了输入标签的value属性。当我操纵输入数字时，项目不会显示/隐藏。如何将输入的CURRENT值分配给我的showNThings变量？

Answer 1

正在运行的演示：link

您也可以使用*ngFor's索引属性和*ngIf进行操作。一起使用它们可以实现它。如下图所示。

app.component.html

<div *ngFor = "let item of arr; let i = index;">
    <div *ngIf="i<limit">ITEM NUMBER : {{item}}<div>
</div>

app.component.ts

export class AppComponent  {
limit=4;
   arr:number[]=[1,2,3,4,5,6,7,8,9,10];
   clickHanler(val:number){
        this.limit = val;
   }
}

Answer 2

有两种方式进行数据绑定。

第一种方法是

当输入内容时，输入的值将被写入用户名模型中，然后反映回视图中，从而产生漂亮的问候。

<input [(ngModel)]="username">
<p>Hello {{username}}!</p>

第二种方法是

<input [value]="username" (input)="username = $event.target.value">
<p>Hello {{username}}!</p>

[value] =“用户名”-将表达式用户名绑定到输入元素的value属性

（input）=“ expression”-是将表达式绑定到输入元素的输入事件的声明方式（是的，有这样的事件）

username = $ event.target.value-触发输入事件时执行的表达式

$ event-是Angular在事件绑定中公开的表达式，具有事件有效负载的值

Two-way Data Binding in Angular