необходимо отобразить дополнительные данные в диалоговом окне mat в угловом

#angular #angular-material #mat-dialog

Вопрос:

введите описание изображения здесь

 "lines": {  "499": " {",  "500": " var client = (ServiceClientBase)GetClientWithUserPassword();",  "501": " client.AlwaysSendBasicAuthHeader = true;",  "611": " ((ServiceClientBase)client).UserName = EmailBasedUsername;",  "612": " ((ServiceClientBase)client).Password = PasswordForEmailBasedAccount;",  "613": "",  "664": " ((ServiceClientBase)client).UserName = EmailBasedUsername;",  "665": " ((ServiceClientBase)client).Password = PasswordForEmailBasedAccount;",  "666": "",  "713": " {",  "714": " var client = (IRestClient)GetClientWithUserPassword();",  "715": " ((ServiceClientBase)client).AlwaysSendBasicAuthHeader = false;",  "730": " {",  "731": " var client = (IRestClient)GetClientWithUserPassword();",  "732": " ((ServiceClientBase)client).AlwaysSendBasicAuthHeader = true;"  },  

app.component.html:

 lt;td class="text-wrap" style="min-width: 100px; max-width:300px;"   (click)="openDialog()"gt;lt;span *ngFor="let line of getLinesArray(scan.lines);let   isLast=last"gt;{{line}}{{isLast ? '' : ', '}}lt;/spangt;lt;/tdgt;  

В этом примере мне нужно отобразить только одну строку данных в столбце таблицы, а остальные мне нужно добавить, нажмите здесь(одна строка… нажмите здесь, чтобы проверить), и если я нажму здесь, то оставшиеся строки должны отображаться в диалоговом окне mat.

Спасибо.

Комментарии:

1. вы имеете в виду, что в диалоговом окне отображается только одна строка и все остальные данные

2. да @VishalPandey

Ответ №1:

для этого вы можете использовать span, я использовал кнопку здесь

copy.component.html

 lt;button  id="copybutt"  mat-menu-item  (click)="classCodeDialog(classroom?.key)"gt;  Copy ClassCode // add your first data here{{ first data }}  lt;/buttongt;  

в приведенном выше коде вместо copy classcode вы можете прочитать свои первые данные там

ниже функция вызовет dialouge

копировать.компонент.ts

 classCodeDialog(key): void{  const dialogRef = this._matDialog.open(  ClassroomCodeDialogComponent, {  autoFocus: false,  data: {  key: key  }  }  )  }  

dialouge.component.html

на месте к данным вы можете применить свои данные с помощью цикла for

 lt;div  fxLayout="row"  fxLayoutAlign="center"  class="w-1/2 pb-4"gt;   lt;!-- HASHTAG --gt;  lt;div  fxLayout="row"  fxLayoutAlign="space-between center"  class="border-dashed rounded border-2 border-gray-600 px-1 pl-3"gt;  lt;ng-container *ngFor = your looped datagt;  lt;p class="text-lg m-0 p-4"gt;{{data}}lt;/pgt;  lt;/divgt; lt;/divgt;  

dialouge.component.ts

здесь, как я ввел данные из другого компонента, но для вас я предложу вызывать данные непосредственно здесь через api или то, что вы используете

 constructor(  @Inject(MAT_DIALOG_DATA) public _data: { key: string },  private _copier: CopierService,  private _snack : SnackbarService  ) {}   ngOnInit(): void {  }   copyKey(): void {  this._copier.copyText(this.data.key);/ this line is for my project you have call you data here  }