元素类型上不存在属性“值" [英] Property 'value' does not exist on type Element

问题描述

我正在尝试使用输入对 mat-table 列中输入的值求和.

我创建了一个包含 3 列的表:Account Id、Account Description 和 Value.我还在 assets 文件夹中创建了一个 JSON 文件，其中包含 acc_id 和 acc_desc 的值.

然后我在我的表中为相应的列访问这些值.

我还创建了一个 Value 列，我为其分配了输入字段.

在表格旁边，我使用了一个带有两个图块的简单网格，我想在其中计算 Value 列中输入的所有值的总和.

account.component.html

 <!-- 表格从这里开始--><垫卡><div class="example-container mat-elevation-z8"><mat-table #table [dataSource]="dataSource1"><!-- 账号栏--><ng-container matColumnDef="acc_id"><mat-h​​eader-cell *matHeaderCellDef>帐户ID.</mat-h​​eader-cell><mat-cell *matCellDef="let element">{{element.acc_id}}</mat-cell></ng-容器><!-- 账户描述栏--><ng-container matColumnDef="acc_des"><mat-h​​eader-cell *matHeaderCellDef>账户描述 </mat-h​​eader-cell><mat-cell *matCellDef="let element">{{element.acc_des }} </mat-cell></ng-容器><!-- 值列--><ng-container matColumnDef="value"><mat-h​​eader-cell *matHeaderCellDef>值</mat-h​​eader-cell><mat-cell *matCellDef="let element"><ng-容器><input [(ngModel)]="element.value"></ng-容器></mat-cell></ng-容器><mat-h​​eader-row *matHeaderRowDef="displayedColumns1" ></mat-h​​eader-row><mat-row *matRowDef="让行；列:displayColumns1;"></mat-row></mat-table><mat-grid-list cols="2" rowHeight="20:1"><mat-grid-tile style="align-self: left;">总计</mat-grid-tile><mat-grid-tile>{{calculation()}}</mat-grid-tile></mat-grid-list>

</mat-card>

account.component.ts

import {Component, OnInit} from '@angular/core';从 'rxjs/Observable' 导入 { Observable };导入 'rxjs/add/operator/map';从@angular/forms"导入 { ReactiveFormsModule, FormGroup,FormControl };从@angular/material"导入{ MatTableDataSource}；从 '../accountdetail.service' 导入 { AccountdetailService };@成分({选择器:'应用程序帐户'，templateUrl: './account.component.html',styleUrls: ['./account.component.scss']})导出类 AccountComponent 实现 OnInit {元素:字符串；价值:任何；构造函数(私人accdetailservice:AccountdetailService){}/* 表格从这里开始--------------- */displayColumns1 = ['acc_id', 'acc_des', 'value'];dataSource1= new MatTableDataSource(ELEMENT_DATA);计算(){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: 元素[] = [];

accountdetails.service.ts

import { Injectable } from '@angular/core';从 '@angular/http' 导入 { Http };导入 'rxjs/add/operator/map';@Injectable()导出类 AccountdetailService {构造函数(私有 http:Http){}帐户详细资料(){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';从'@angular/platform-b​​rowser' 导入 { BrowserModule };从@angular/platform-b​​rowser/animations"导入 { BrowserAnimationsModule };从 '@angular/forms' 导入 { ReactiveFormsModule,FormsModule };从'@angular/http'导入{HttpModule}；import { AppMaterialModule } from './app-material.module';import { AppRoutingModule } from './app-routing.module';从 './app.component' 导入 { AppComponent };从 './account/account.component' 导入 { AccountComponent };从 './accountdetail.service' 导入 { AccountdetailService };@NgModule({声明: [应用组件，帐户组件],进口:[浏览器模块，应用路由模块，反应形式模块，浏览器动画模块，应用材料模块，表单模块，Http模块],入口组件:[ ],提供者:[AccountdetailService]，引导程序:[AppComponent]})导出类 AppModule { }

我能够总结在值列中输入的值，但出现以下错误.

谁能告诉我如何在表中获取 value 属性而不在 Element 中定义它.

这是我的输出..

解决方案

在您的 ngOnInit 函数中试试这个.您需要动态创建 value 属性.

ngOnInit(){this.accdetailservice.accountdetails().subscribe(data =>让 tempObject = data.map(obj => ({...obj, value: 0}));this.dataSource1.data = tempObject;);}

I am trying to sum up the values entered in the mat-table column using an input.

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.

I have also created a Value column for which i have assigned input field.

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 .

can anybody tell me how can i take value property in the table without defining it in the Element.

This is my output..

解决方案

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屋！