在Angular11中將資料傳輸到模態？

我在由一組物件填充的 html 頁面上有一個資料表。每行都有一個洗掉按鈕。當您單擊洗掉按鈕時，會彈出一個模式，詢問您是否真的要洗掉該行。

我試圖弄清楚如何將行的 id 傳輸到模式中，以便當有人單擊“是”時，然后我可以將該 id 發送到一個端點，該端點將從表中洗掉該條目。

請記住，模態代碼與表格代碼在同一頁面上。換句話說，模態不是一個單獨的組件。

這是下面的代碼和說明問題的螢屏截圖......

<table class="table table-bordered table-striped mt-3">
          <thead>
            <tr>
              <th scope="col">Application</th>
              <th scope="col">Error Source</th>
              <th scope="col">Message</th>
              <th scope="col">StackTrace</th>
              <th scope="col">Date</th>
              <th scope="col">User</th>
            </tr>
          </thead>
          <tbody>
            <tr *ngFor="let error of listOfErrors | paginate: { itemsPerPage: itemsPerPage, currentPage: page }">
              <td>{{ error.application }}</td>
              <td>{{ error.errorSource }}</td>
              <td>{{ error.message }}</td>
              <td>{{ error.stackTrace }}</td>
              <td>{{ error.date }}</td>
              <td>{{ error.user }}</td>
              <td class="edit-button">
                <button class="btn btn-primary"
                        type="button"                        
                        data-bs-toggle="modal"
                        attr.data-bs-target="#{{ deleteRoleModalId }}">
                  Delete
                </button>
              </td>
            </tr>
          </tbody>
        </table>

這是模態的代碼（同樣，在同一個 html 頁面上）

<app-modal [id]="deleteRoleModalId"
               [title]="deleteRoleTitle">
      <p>Are you sure you want to delete this role? </p>

      <div class="mt-3">
        <button class="btn btn-primary float-start"
                type="button"              
                (click)="deleteRole()">
          Yes
        </button>
        <button class="btn btn-secondary me-1 float-start"
                type="button"               
                data-bs-dismiss="modal">
          No
        </button>
      </div>
    </app-modal>

這就是物件陣列的樣子......

public listOfErrors: any[] = [
    {
      id: 1,
      application: "Default Case Set",
      errorSource: "CASEWORK",
      message: 34,
      stackTrace: 0,
      date: 0,
      user: 0
    }
  ];

桌子是這樣的……

這就是模態的樣子......

uj5u.com熱心網友回復：

假設模態組件是主組件的子組件（因為你提到它們在同一個HTML檔案中），id從父組件通過@Input()傳遞給模態，那么你可以將資料傳遞給父組件（洗掉/未洗掉）通過 eventEmitter 和 @Output() 裝飾器。

在官方檔案中查看這里是如何準確實作的：https : //angular.io/guide/component-interaction

另一種選擇是使用服務和可觀察物件，這是另一種可行的方法，盡管處理組件之間的資訊通信有點復雜。當組件不相關時，這種方法特別有用。

uj5u.com熱心網友回復：

我會創建 modal 作為它自己的組件并使用 angular modal 指令。通過這種方式，您還可以豐富此組件，使其對任何型別的洗掉都很有用。換句話說，該組件可以負責洗掉內容。

export class DeleteModalComponent {

    @ViewChild('modal', { static: true }) modal: ModalDirective;

  public deleteId= '';
    
  show(id: string): void {
        this.deleteId = id
        this.modal.show();
    }

  delete(): void {
  //Delete logic here with this.deleteId
  }

 close(): void {
        this.modal.hide();
    }
}

因此，在您的表組件 ts 檔案中，您將呼叫模態的“show”方法來打開它，以及 rowId（errorId？）。

/// Add the modal as a viewchild to your table component

     @ViewChild('deleteModal', { static: true }) deleteModal: DeleteModalComponent;

     openDeleteModal(rowId: string): void {
            this.deleteModal.show(rowId);
        }

因此在 HTML 中：

  <table class="table table-bordered table-striped mt-3">
              <thead>
                <tr>
                  <th scope="col">Application</th>
                  <th scope="col">Error Source</th>
                  <th scope="col">Message</th>
                  <th scope="col">StackTrace</th>
                  <th scope="col">Date</th>
                  <th scope="col">User</th>
                </tr>
              </thead>
              <tbody>
                <tr *ngFor="let error of listOfErrors | paginate: { itemsPerPage: itemsPerPage, currentPage: page }">
                  <td>{{ error.application }}</td>
                  <td>{{ error.errorSource }}</td>
                  <td>{{ error.message }}</td>
                  <td>{{ error.stackTrace }}</td>
                  <td>{{ error.date }}</td>
                  <td>{{ error.user }}</td>
                  <td class="edit-button">
                    <button class="btn btn-primary"
                            type="button"                        
                            data-bs-toggle="modal"
                            (click)="openDeleteModal(error.id)"
                      Delete
                    </button>
                  </td>
                </tr>
              </tbody>
            </table>

   <deleteModal #deleteModal></deleteModal>

標籤：javascript html 数组 有角的 数据表

上一篇：如何在ReactApp中顯示來自Flask的資料？

下一篇：在C中將陣列作為引數傳遞