#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 }