angular - 需要在 Angular 的 mat-dialog 上显示额外的数据

Question

"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：

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

在这个例子中，我只需要在表格列上显示一行数据，剩下的我需要添加点击这里（一行...点击这里检查），如果我点击这里，那么剩余的行应该显示在 mat 对话框上。

谢谢。

Answer 1

为此你可以使用 span 我在这里使用了按钮

复制.component.html

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

在上面的代码中，copy classcode您可以在那里读取您的第一个数据

下面的函数将调用diaouge

复制.component.ts

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

dialouge.component.html

在数据上，您可以使用 for 循环应用您的数据

<div
    fxLayout="row"
    fxLayoutAlign="center"
    class="w-1/2 pb-4">

    <!-- HASHTAG -->
    <div
      fxLayout="row"
      fxLayoutAlign="space-between center"
      class="border-dashed rounded border-2 border-gray-600 px-1 pl-3">
      <ng-container *ngFor = your looped data>
         <p class="text-lg m-0 p-4">{{data}}</p>
    </div>
</div>

对话组件.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
  }