Question

我正在使用PrimeNg 6.1.5和Angular6。我正在使用PrimeNg表来显示数据，该表还包含三个输入框a，b，我们需要将这些值相乘并插入另一个输入框。 / p>

我的代码：

<div class="primetable" style="box-shadow: 0 1px 20px 0 rgba(69,90,100,.08);">
    <p-table [value]="student"
        [columns]="cols"
        #dt
        class="primetable"
        [paginator]="true"
        [rows]="15">
        <ng-template pTemplate="caption">
            <div>
                <input type="text"
                    class="form-control"
                    pInputText
                    size="50"
                    placeholder="Search Data Here"
                    (input)="dt.filterGlobal($event.target.value, 'contains')"
                    style="width:auto">
            </div>
        </ng-template>
        <ng-template pTemplate="header"
            let-columns>
            <tr>
                <th style="padding: 15px 15px;color: #1e6bb8;background: white"
                    *ngFor="let col of columns">{{col.header}}</th>
            </tr>
        </ng-template>
        <ng-template pTemplate="body"
            let-student
            let-i="rowIndex"
            let-columns="columns">
            <tr [pSelectableRow]="student">
                <td >{{i+1}}</td>
                <td>{{student.regnum}}</td>
                <td>{{student.name}}</td>
                <td><input id="a" class="form-control" name="valuea" type="number" /></td>
                <td><input id="b" class="form-control" name="valueb" type="number" /></td>
                <td><input id="ab" class="form-control" name="mulvalue" type="number" value="" /></td>
            </tr>
        </ng-template>
    </p-table>
</div>

Ts代码：

    ngOnInit() {
    this.http.get('http://localhost:3000/api/student/studentslist').subscribe(res => {
      let data = res.json();
      this.student = data;
    });

    this.cols = [
      { field: 'S.No', header: 'S.No' },
      { field: 'regnum', header: 'Regnum' },
      { field: 'name', header: 'Name' },
      { field: 'a', header: 'a' },
      { field: 'b', header: 'b' },
      { field: 'ab', header: 'a*b' },
      { field: 'Options', header: 'Options' }
  ];
  }

预先感谢

编辑：在尝试@sunil singh之后，这是我的输出：

它在页面开始时为所有文本框计算值，并将其设置为0，但我在A * B文本框中不应有任何值。

调试模式：根据@sunil singh的建议，我使用了调试模式

工作代码：非常感谢@Sunil Singh

<tr [pSelectableRow]="student">
                <td >{{i+1}}</td>
                <td>{{student.regnum}}</td>
                <td>{{student.name}}</td>
                <td><input id="a" #first class="form-control" name="valuea" type="number" /></td>
                <td><input id="b" #second class="form-control" name="valueb" type="number"/></td>
                <td><input id="ab" class="form-control" name="mulvalue" type="number" [value]="(first.value && second.value) ? (+first.value * +second.value) : ''" /></td>
                <td>
                    <button class="btn btn-green"
                        style="font-size: 15px;color: #1e6bb8"
                        (click)="editbutton(student)"><i class="fa fa-pencil"></i></button>
                    <button class="btn btn-danger"
                        style="font-size: 15px;"><i class="fa fa-trash-o fa-spin-hover"></i></button>
                    <button class="btn btn-primary" (click)="gotoprofile(student)"
                        style="font-size: 15px;"><i class="fa fa-eye fa-spin-hover"></i></button>
                </td>
            </tr>

Answer 1

使用ElementRef解决此类问题。

<td><input #first class="form-control" name="valuea" type="number" /></td>
<td><input #second class="form-control" name="valueb" type="number" /></td>
<td><input [value]="(first.value && second.value) ? (+first.value + +second.value) : ''"  class="form-control" name="mulvalue" type="number" value="" /></td>

调试版本

<td><input #first class="form-control" name="valuea" type="number" /> {{first.value}}</td>
<td><input #second class="form-control" name="valueb" type="number" />{{second.value}}</td>
<td><input [value]="(+first.value + +second.value)" class="form-control" name="mulvalue" type="number" value="" />{{(+first.value + +second.value)}}</td>

附加
note +可以将表达式+first.value + +second.value中的字符串转换为int

PrimeNg Angular6中的输入框值相乘

1 个答案:

调试版本