0

我正在尝试创建一个包含多个用户数据的应用程序。我必须为每个用户创建 6 个模式，他们可以从中访问他们的数据。假设用户 1 有 6 个名为 - ABCDEF 的模态，那么

单击 A 时，应打开登录模式。

点击B，注册模式应该打开

并且所有这些模式对于所有用户都是不同的。

我尝试为用户创建不同的方法，但这不起作用。因为我将不得不为所有用户创建 6 种方法，并且与模式相同。因此，对于 1 个用户，我将必须创建 6 个模态，然后再为第 2 个用户创建另外 6 个模态，依此类推。

有没有更好的方法呢？

我创建了一个StackBlitz来展示我所做的

4

2 回答 2

1

你可以试试下面的东西。

app.component.ts

import { Component, VERSION } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  name = 'Angular ' + VERSION.major;
  displayModal = 'none';

  users = [
    {
      id: 'user1',
      name: 'User 1'
    },
    {
      id: 'user2',
      name: 'User 2'
    },
    {
      id: 'user3',
      name: 'User 3'
    },
    {
      id: 'user4',
      name: 'User 4'
    },
    {
      id: 'user5',
      name: 'User 5'
    },
    {
      id: 'user6',
      name: 'User 6'
    }
  ];

  modals = [
    {
      label: 'A',
      type: 'login'
    },
    {
      label: 'B',
      type: 'register'
    },
    {
      label: 'C',
      type: 'reset password'
    },
    {
      label: 'D',
      type: 'Forgot Password'
    },
    {
      label: 'E',
      type: 'Confirmation'
    },
    {
      label: 'F',
      type: 'Delete'
    }
  ];

  modalsForEachUser = 6;
  selectedUser;
  selectedModal;

  openModal(user, modal) {
    console.log(user);
    this.selectedUser = user;
    this.selectedModal = modal;
    this.displayModal = 'block';
  }

  onCloseHandled() {
    this.displayModal = 'none';
  }
}

app.component.html

<table>
  <tr *ngFor="let user of users">
    <td class="actions text-left">
      {{ user.name }}
    </td>
    <a *ngFor="let modal of modals" (click)="openModal(user, modal.type)" class="abcd">
      {{ modal.label }}
    </a>
  </tr>
</table>

<div class="modal" tabindex="-1" role="dialog" [ngStyle]="{'display': displayModal}" *ngIf="selectedUser">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title">{{ selectedUser.name }} {{ selectedModal }}</h4>
        <button type="button" class="close" aria-label="Close" (click)="onCloseHandled()"><span aria-hidden="true">&times;</span></button>
      </div>
      <form id="login" method="post" autocomplete="off">
        <div class="modal-body">
          <div class="container-fluid">
            <div class="row m-b-20">
              <div class="col-md-4">
                <label class="deposite-user-first">{{ selectedUser.name }}</label>
              </div>
            </div>
          </div>
        </div>
        <div class="modal-footer">

          <button type="button" class="btn btn-back" data-dismiss="modal" (click)="onCloseHandled()"><i class="fas fa-undo"></i>Back</button>
          <button type="submit" class="btn btn-submit">submit<i class="fas fa-sign-in-alt"></i></button>
        </div>
      </form>
    </div>
  </div>
</div>

你可以在这里查看工作演示。

如果您有任何疑问，请告诉我。

于 2021-08-09T14:18:26.167 回答
1

据我了解，您应该为“登录”和“注册”等操作创建组件，确保它们有自己的业务，例如要调用或验证的 API。

然后您可以将用户名等参数传递给这些组件。此外，您可以将模态功能放在这些组件中，或者将其保留在根组件中。

一般来说，您所做的不是一个好的做法，请考虑重新设计您进入每个表单的方式。

提供了一个示例代码： stackblitz

于 2021-08-09T15:35:58.530 回答