Question

我在绑定方面遇到问题。

我有以下代码段：

<div class="columns" *ngFor="let prop of proprietiesList; let i = index">
    <div class="column is-one-quarter">
        <label>{{prop.prop_nome}}</label>
    </div>
    <div class="column">
        <div class="select">
            <select [id]="'options'+i" #product>
                <option [value]="opt.prop_opcao_preco" *ngFor="let opt of prop.options">{{opt.prop_opcao_nome}}</option>
            </select>
        </div>   
    </div>
</div>

我的目标是在组件加载时运行一个函数，该函数将打印在每个select元素中选择的所有值。我已经尝试过了：

calculaPreco(): void{
    for(let i = 0; i<this.proprietiesList.length; i++){
      this.selectPriceArray.push((<HTMLInputElement>(document.getElementById("options"+i))).value);
    }
}

此函数称为：

this.proprietiesList = data;
this.calculaPreco();

但是，这会给我以下错误：

无法读取null的属性“值”

这意味着，此时select元素尚不存在。关于如何解决这个问题的任何线索？我尝试了ngAfterViewInit来运行该函数，但是没有运气。

Answer 1

可能是更好的方法，但这是我将尝试的方法：

<div class="columns" *ngFor="let prop of proprietiesList; let i = index">
    <div class="column is-one-quarter">
        <label>{{prop.prop_nome}}</label>
    </div>
    <div class="column">
        <div class="select">
            <select [id]="'options'+i" #product>
                <option [value]="opt.prop_opcao_preco" *ngFor="let opt of prop.options">{{opt.prop_opcao_nome}}</option>
            </select>
        </div>
    </div>
    <div *ngIf="index === proprietiesList.length && this.calculaPreco()"></div>
</div>

使用索引来检查我们是否位于列表的最后一项中，calcularPreco将仅在生成每个元素之后执行而且只有一次。

Answer 2

ngAfterViewChecked应该可以工作

// When change detection has finished:
// child components created, all *ngIfs evaluated

ngAfterViewChecked() {
  this.calculaPreco(); 
}

Answer 3

没有答案能真正帮助我，我在选择中定义了一个空选项，并使用onChange函数将选择的值添加到了数组中。

还是谢谢你！

ngFor完成后运行功能

3 个答案: