时间戳

首页 > 解决方案 > 类型 dialogComponent 上不存在属性“打开”

angular - 类型 dialogComponent 上不存在属性“打开”

问题描述

我正在尝试创建对话框组件以通过单击按钮来更新表格。查看-sos.component.html

<button><a (click)="openDialog('Update',element)">Edit</a></button>

查看-sos-component.ts

import { MatTableDataSource } from '@angular/material/table';
import { MatPaginator } from '@angular/material/paginator';
import {MatSort} from '@angular/material/sort';
import { MatTable } from '@angular/material/table';
import {MatDialogModule} from '@angular/material/dialog';
import {MatDialog, MatDialogRef, MAT_DIALOG_DATA} from '@angular/material/dialog';
import {ViewSosService} from '../../services/sos/view-sos.service';
import { UpdateDialogComponent } from './update-dialog/update-dialog.component'

@Component({
  selector: 'app-view-sos',
  templateUrl: './view-sos.component.html',
  styleUrls: ['./view-sos.component.css']
})
export class ViewSosComponent implements OnInit {

  data:Array<any>;
  sosMsgInfo:Array<any>;
  marketInfoLocations:Array<any>;
  sosList:Array<any>;
  en:string;
  fr:string;
  sw:string;
  pt:string;
  loading = true;
  constructor(private getsosMsg: ViewSosService, public dialog: UpdateDialogComponent) {
    this.data = new Array<any>();
   }

   openDialog(action,obj) {
    obj.action = action;
    const dialogRef = this.dialog.open(UpdateDialogComponent, {
      width: '250px',
      data:obj
    });

    dialogRef.afterClosed().subscribe(result => {
      if(result.event == 'Update'){
        this.updateRowData(result.data);
      }else if(result.event == 'Delete'){
        this.deleteRowData(result.data);
      }
    });
   }

   updateRowData(row_obj){
    this.dataSource = this.dataSource.filter((value,key)=>{
      if(value.id == row_obj.id){
        value.name = row_obj.name;
      }
      return true;
    });
  }
  deleteRowData(row_obj){
    this.dataSource = this.dataSource.filter((value,key)=>{
      return value.id != row_obj.id;
    });
  }

  displayedColumns: string[] = ['serialNo', 'messageEng', 'messageFre', 'messageSwa', 'messagePor','sosImg','action'];
  dataSource = new MatTableDataSource<MarketData>();

  @ViewChild(MatPaginator, {static: true}) paginator: MatPaginator;
  @ViewChild(MatSort, {static: true}) sort: MatSort;
  @ViewChild(MatTable,{static:true}) table: MatTable<any>;

  ngOnInit(){
    //var retrievedObject = localStorage.getItem('testObject');
    //console.log('retrievedObject: ', JSON.stringify(retrievedObject));

    this.getsosMsg.getsosMsgInfo().subscribe((data) =>{
      var json = JSON.parse(JSON.stringify(data));
      this.sosList=[];
       for(var i=0;i<json.SOSMessageInfo.length;i++)
       {
         this.splitLang(json.SOSMessageInfo[i].Message);
         this.sosList.push({"SosID":json.SOSMessageInfo[i]["Message Id"],"Message":this.en,"MessageFrench":this.fr,"MessagePortuguese":this.pt,"MessageSwahili":this.sw,"image":json.SOSMessageInfo[i]["Image Url"],'Update':false});
       }
       console.log(this.sosList);
       this.dataSource = new MatTableDataSource<MarketData>(this.sosList);
       this.dataSource.paginator = this.paginator;
       this.dataSource.sort = this.sort;
       this.loading = false;
    });

    //localStorage.setItem('testObject', JSON.stringify(this.sosList));


  }

  splitLang(str)
     {
       this.en=str.split("$")[0];
       this.fr=str.split("$")[1];
       this.sw=str.split("$")[2];
       this.pt=str.split("$")[3];
       console.log(this.en);
     }
  
  applyFilter(filterValue: string) {
    filterValue = filterValue.trim(); 
    filterValue = filterValue.toLowerCase(); 
    this.dataSource.filter = filterValue;
  }

}
export interface MarketData {
  serialNo: number;
  messageEng: string;
  messageFre: string;
  messageSwa: string;
  messagePor: string;
  sosImg: string;
  action: string;
}

下面是对话框组件 update-dialog.component.html

<h1 mat-dialog-title>Row Action :: <strong>{{action}}</strong></h1>
<div mat-dialog-content>
  <mat-form-field *ngIf="action != 'Delete'; else elseTemplate">
    <input placeholder="{{action}} Name" matInput [(ngModel)]="local_data.name">
  </mat-form-field>
  <ng-template #elseTemplate>
    Sure to delete <b>{{local_data.name}}</b>?
  </ng-template>
</div>
<div mat-dialog-actions>
  <button mat-button (click)="doAction()">{{action}}</button>
  <button mat-button (click)="closeDialog()" mat-flat-button color="warn">Cancel</button>
</div>

更新-dialog.component.ts

import { Component, OnInit, Optional, Inject } from '@angular/core';
import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';

export interface MarketData {
  messageEng:string;
  messageFre:string;
  messageSwa:string;
  messagePor:string;
}

@Component({
  selector: 'app-update-dialog',
  templateUrl: './update-dialog.component.html',
  styleUrls: ['./update-dialog.component.css']
})
export class UpdateDialogComponent implements OnInit {
  action:string;
  local_data:any;

  constructor(public dialogRef: MatDialogRef<UpdateDialogComponent>,
    @Optional() @Inject(MAT_DIALOG_DATA) public data: MarketData) {
      console.log(data);
      this.local_data = {...data};
      this.action = this.local_data.action;
     }

     doAction(){
      this.dialogRef.close({event:this.action,data:this.local_data});
    }
  
    closeDialog(){
      this.dialogRef.close({event:'Cancel'});
    }

  ngOnInit(): void {
  }

}

下面是我得到的错误

ERROR in src/app/SOS/view-sos/view-sos.component.ts:33:35 - error TS2339: Property 'open' does not exist on type 'UpdateDialogComponent'.

    33     const dialogRef = this.dialog.open(UpdateDialogComponent, {
                                         ~~~~
    src/app/SOS/view-sos/view-sos.component.ts:48:39 - error TS2349: This expression is not callable.
      Type 'String' has no call signatures.

    48     this.dataSource = this.dataSource.filter((value,key)=>{
                                             ~~~~~~
    src/app/SOS/view-sos/view-sos.component.ts:56:39 - error TS2349: This expression is not callable.
      Type 'String' has no call signatures.

    56     this.dataSource = this.dataSource.filter((value,key)=>{

请帮我解决这些错误。

提前致谢

标签： angulartypescript

解决方案

constructor(private getsosMsg: ViewSosService, public dialog: UpdateDialogComponent) {

你有依赖注入的问题。

应该是public dialog: MatDialog。

更新

我不确定你为什么这样做，但这是一个错误。

this.dataSource.filter = filterValue;

您在方法中设置filterthis.dataSource ，其中 which 是一个字符串。applyFilterfilterValue

然后你调用this.dataSource.filter(...)内部deleteRowData方法。

filter是字符串而不是可调用函数。

推荐阅读