属性“值"在元素类型上不存在 [英] Property 'value' does not exist on type Element
问题描述
我正在尝试使用输入汇总在mat-table
列中输入的值.
I am trying to sum up the values entered in the mat-table
column using an input.
我创建了一个包含3列的表:Account Id
,Account Description
和Value
.我还在资产文件夹中创建了一个JSON文件,其值分别为acc_id
和acc_desc
.
I have created a table with 3 columns: Account Id
, Account Description
and Value
. I have also created a JSON file in the assets folder with the values for acc_id
and acc_desc
.
然后我在表格中访问相应列的这些值.
I then access these values in my table for the respective columns.
我还创建了一个Value
列,并为其分配了输入字段.
I have also created a Value
column for which i have assigned input field.
在表格旁边,我采用了一个简单的网格,其中包含两个图块,在这里我要获取在Value
列中输入的所有值的总和.
Next to the table i took a simple grid with two tiles where i want to take the sum of all the values entered in the Value
column.
account.component.html
<!-- Table starts here -->
<mat-card>
<div class="example-container mat-elevation-z8">
<mat-table #table [dataSource]="dataSource1">
<!-- Account No. Column -->
<ng-container matColumnDef="acc_id">
<mat-header-cell *matHeaderCellDef> Account ID. </mat-header-cell>
<mat-cell *matCellDef="let element">{{element.acc_id}}</mat-cell>
</ng-container>
<!-- Account Description Column -->
<ng-container matColumnDef="acc_des">
<mat-header-cell *matHeaderCellDef> Account Description </mat-header-cell>
<mat-cell *matCellDef="let element">{{element.acc_des }} </mat-cell>
</ng-container>
<!-- Value Column -->
<ng-container matColumnDef="value">
<mat-header-cell *matHeaderCellDef> Value </mat-header-cell>
<mat-cell *matCellDef="let element">
<ng-container>
<input [(ngModel)]="element.value">
</ng-container>
</mat-cell>
</ng-container>
<mat-header-row *matHeaderRowDef="displayedColumns1" ></mat-header-row>
<mat-row *matRowDef="let row; columns: displayedColumns1;" > </mat-row>
</mat-table>
<mat-grid-list cols="2" rowHeight="20:1">
<mat-grid-tile style="align-self: left;"> Total</mat-grid-tile>
<mat-grid-tile>{{calculation()}}</mat-grid-tile>
</mat-grid-list>
</div>
</mat-card>
account.component.ts
import {Component, OnInit} from '@angular/core';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';
import { ReactiveFormsModule, FormGroup,FormControl } from '@angular/forms';
import { MatTableDataSource} from '@angular/material';
import { AccountdetailService } from '../accountdetail.service';
@Component({
selector: 'app-account',
templateUrl: './account.component.html',
styleUrls: ['./account.component.scss']
})
export class AccountComponent implements OnInit {
element: string;
value: any;
constructor( private accdetailservice: AccountdetailService ) { }
/* Table Starts here
---------------------- */
displayedColumns1 = ['acc_id', 'acc_des', 'value'];
dataSource1= new MatTableDataSource<Element>(ELEMENT_DATA);
calculation(){
return this.dataSource1.data.reduce((summ, v) => summ += parseInt(v.value), 0)
}
ngOnInit(){
this.accdetailservice.accountdetails()
.subscribe(data =>this.dataSource1.data = data); }
}
const ELEMENT_DATA: Element[] = [];
accountdetails.service.ts
import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import 'rxjs/add/operator/map';
@Injectable()
export class AccountdetailService {
constructor(private http:Http ) { }
accountdetails()
{
return this.http.get('/assets/accountdetails.json')
.map(result => result.json());
}}
accountdetails.json
[
{
"acc_id": 1001,
"acc_des": "aaa"
},
{
"acc_id": 1002,
"acc_des": "aaa"
}
]
app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { ReactiveFormsModule,FormsModule } from '@angular/forms';
import { HttpModule} from '@angular/http';
import { AppMaterialModule } from './app-material.module';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { AccountComponent } from './account/account.component';
import { AccountdetailService } from './accountdetail.service';
@NgModule({
declarations: [
AppComponent,
AccountComponent
],
imports: [
BrowserModule,
AppRoutingModule,
ReactiveFormsModule,
BrowserAnimationsModule,
AppMaterialModule,
FormsModule ,
HttpModule
],
entryComponents:[ ],
providers: [ AccountdetailService],
bootstrap: [AppComponent]
})
export class AppModule { }
我能够总结在值"列中输入的值,但是出现以下错误.
I am able to sum up the values entered in the value column , but I am getting the below error .
任何人都可以告诉我如何在表中使用value属性而不在 Element 中定义它.
can anybody tell me how can i take value property in the table without defining it in the Element.
这是我的输出.
推荐答案
在您的ngOnInit
函数中尝试此操作.您需要动态创建value
属性.
try this in your ngOnInit
function. You need dynamically create the value
property.
ngOnInit(){
this.accdetailservice.accountdetails().subscribe(data =>
let tempObject = data.map(obj => ({...obj, value: 0}));
this.dataSource1.data = tempObject;
);
}
这篇关于属性“值"在元素类型上不存在的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!