Angular - 如何通过一种方式绑定在 ngFor 循环中获取输入值答案

【问题标题】：Angular - How to get input value at ngFor loop with one way bindingAngular - 如何通过一种方式绑定在 ngFor 循环中获取输入值
【发布时间】：2018-11-08 17:47:45
【问题描述】：

您能否给我一种通过单向绑定在 ngFor 循环中获取输入值的方法？

<div *ngFor="let d of dataList">
  <input #inputValue type="text" [ngValue]="d.value">
  <button *ngIf="!d.open" (click)="d.open = true">change</button>
  <button *ngIf="d.open" (click)="save(d.id, NEWVALUE); d.open = false;">save</button>
  <button *ngIf="d.open" (click)="d.open = false">cancel</button>
</div>`

如何设置 NEWVALUE？用双向绑定很容易。但点击取消后，值已经改变因为我不想要。所以会避免这种方式。

我发现的一个解决方案是使用 (ngModelChange)。

<div *ngFor="let d of dataList">
  <input #inputValue type="text" [ngValue]="d.value" (ngModelChange)="dataChanged($event)">
  <button *ngIf="!d.open" (click)="d.open = true">change</button>
  <button *ngIf="d.open" (click)="save(d.id); d.open = false;">save</button>
  <button *ngIf="d.open" (click)="d.open = false">cancel</button>
</div>


private newVal;
dataChanged(val) {
  this.newVal = val;
}
save(id) {
  saveDb(id, this.newVal);
}

我猜这不是清晰和优化的代码。

据我所知，带有 # 的模板绑定也不适用于 ngFor。喜欢

<div *ngFor="let d of dataList">
  <input #inputValue_{{d.id}} type="text" [ngValue]="d.value">
  <button *ngIf="d.open" (click)="save(inputValue_{{d.id}}.value); d.open = false;">save</button>
</div>

你有什么好的解决办法吗？

【问题讨论】：

标签： angular binding ngfor oneway

【解决方案1】：

你不可能必须直接提供模板变量，但我为你做了一个替代方案

HTML

<div *ngFor="let item of array">
  <input id="id_{{item.id}}" />
  <button type="button" (click)="printValue('id_'+item.id)"> buton {{item.id}}   </button>
</div>

组件

export class AppComponent  {
  array = [{id: 1}, {id: 2},{id: 3}]

  printValue(value: any){
    console.log(value);
    var containputiner = document.querySelector("#"+value);
    console.log(containputiner.value);
  }
}

Stackblitz Demo

【讨论】：

【解决方案2】：

您可以复制数组并使用原始数组中的数据来设置先前的值，就像它在内存中一样。

查看我的代码示例： https://stackblitz.com/edit/angular-a4eucy

【讨论】：

【解决方案3】：

您可以创建一个新组件来表示列表中的一个项目。

app-item-list.ts

import { Component, Input, Ouput, EventEmitter } from '@angular/core';

@Component({
  selector: 'app-item-list'
  templateUrl: './app-item-list.html'
})

export class ItemListComponent {

  newValue: string;
  @Input() data: YourDataClassType;
  @Output() onUpdate: EventEmitter<{id: number, newValue: string}>;

  contructor() {

    this.onUpdate = new EventEmitter<{id: number, newValue: string}>;
    this.newValue = data.value;
  }

  save() {

    this.onUpdate.emit({id: this.data.id, newValue: this.newValue});
  }
}

app-item-list.html

<div>
  <input type="text" [(ngValue)]="newValue">
  <button *ngIf="!data.open" (click)="data.open = true">change</button>
  <button *ngIf="data.open" (click)="save(); d.open = false;">save</button>
  <button *ngIf="data.open" (click)="data.open = false">cancel</button>
</div>

父组件.html

<app-item-list *ngFor="let d of datalist" [data]="d" (onUpdate)="save($event)" />

父组件.ts

save($event) {
  console.log($event.id, $event.newValue);
}

记得在你的模块声明中包含“app-item-list”。

此代码可能需要一些重构。我没有测试就成功了，我有一段时间没有使用 angular。

【讨论】：

【解决方案4】：

home.component.html

<div>
<ul>
<li style="border:1px solid;width:25%;margin-bottom:1%;cursor:pointer;" *ngFor="let items of statusdata"  (click)="getData(items)"><span>{{items.id}}</span>&nbsp;&nbsp;&nbsp;&nbsp;<span>{{items.name}}</span></li>
</ul>
<select  [(ngModel)]="getOption">
<option>2019-2020</option>
</select>
</div>

home.component.ts

import { Component, OnInit } from '@angular/core';
import { CommonserviceService } from './../utilities/services/commonservice.service';
import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
declare var $: any;
@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {
  getIt:any;
  statusdata: any;
  getOption:any;
  ngOnInit() {

      this.statusdata = [{ id: 1, name: 'Angular 2+' },
    { id: 2, name: 'Angular 4' },
    { id: 3, name: 'Angular 5' },
    { id: 4, name: 'Angular 6' },
    { id: 5, name: 'Angular 7' }
  ];
console.log(this.getOption);

  }
  getData(items){
      console.log(items.name+"and"+items.id);

  } 

}

【讨论】：