Как сделать так, чтоб модальное окно срабатывала только для одного «Универа»?

Question

[laravel_creative_3103]

Условно, есть модальное окно, которое я бы хотел открыть, при нажатии на то, что в красной линии:


Но, когда нажимаешь на одну из них, открывается сразу все модалки:


...

В коде html таким образом прописал:

<p>unversity-components works!</p>
<div *ngFor="let univer of universities">
  <div>{{ univer.nameOfUniversity }}</div>
  <button (click)="modal = true">
    смотреть подробную информацию о студентах
  </button>
  <button (click)="removeUniver(univer.id!)">
    Удалить универ {{ univer.nameOfUniversity }}
  </button>

  <div *ngIf="modal">
    <button (click)="modal = false">Закрыть модальное окно</button>
    <h1>Ученики {{ univer.nameOfUniversity }}</h1>

    <div *ngFor="let student of univer.students">
      <div>{{ student.firstName }}</div>
      <div>{{ student.lastName }}</div>
    </div>
  </div>
</div>

<input type="text" [(ngModel)]="nameOfUniversity" placeholder="Универ" />
<button (click)="addUniver()">Добавить новый универ</button>

В TS таким образом написал:

export class UnversityComponentsComponent implements OnInit {
  universities: IUniversity[] = [];
  nameOfUniversity: string = '';
  modal: boolean = false;

  constructor(private unverService: UniverService) {}
  ngOnInit(): void {
    this.getAll();
  }

  getAll() {
    this.unverService.getAll().subscribe((univers) => {
      this.universities = univers;
      console.log(this.universities);
    });
  }

  addUniver() {
    const newUniver: IUniversity = {
      nameOfUniversity: this.nameOfUniversity,
    };
    this.unverService.addUniver(newUniver).subscribe((newUniver) => {
      this.universities.unshift(newUniver);
      this.nameOfUniversity = '';
      console.log(newUniver);
    });
  }

  removeUniver(id: number) {
    this.unverService.removeUniver(id).subscribe(() => {
      this.universities = this.universities.filter((u) => u.id !== id);
    });
  }
}

Как в ангуляре правильно написать, чтоб открывалась только та модалка, которую я бы хотел открыть?

Answer 1

[Сергей delphinpro]

Университеты вы перебираете в цикле, а переменная modal у вас одна общая на всех. Сделайте отдельную переменную для каждого универа.

Comments

[laravel_creative_3103]

Но ведь если делать для каждого универа отдельную переменную, то это получится копи паст ведь?

[Сергей delphinpro]

laravel_creative_3103, ну можно отдельный массив id => modal
или прямо в IUniversity добавить флаг isOpenModal

[Сергей delphinpro]

laravel_creative_3103, то есть у вас будет примерно так

<div *ngIf="univer.modal">

[Сергей delphinpro]

laravel_creative_3103, и здесь

getAll() {
    this.unverService.getAll().subscribe((univers) => {
      this.universities = univers.map(u=>{
        u.modal = false;
        return u;
      });
      console.log(this.universities);
    });
  }

Примерно. Я на TS и Ангуляре не пишу, просто подкидываю общую логику.

[laravel_creative_3103]

Сергей delphinpro, а шо так можно было)) спасибо, почему то не додумался добавить допольнительное свойство для интерфейса модалки

[Сергей delphinpro]

laravel_creative_3103, и еще вариант - выделить универ в отдельный компонент
То есть два компонента - Список универов и один универ. Тогда в компоненте универа будет свое свойство modal и не нужно будет его прописывать в интерфейсе. Как по мне, это более правильный вариант.

<div *ngFor="let univer of universities">
  <University [(ngModel)]="univer">
</div>

Я не заню как в ангуляре передаются данные в компонент, написал интуитивно

[laravel_creative_3103]

Сергей delphinpro, а вот, чтобы добавить ученика для универа, как нужно будет правильно прописать объект?
метод для создания ученика:

addStudent() {
    const newStudent: IStudent = {
      //вот здесь должен быть universityId
      firstName: this.firstName,
      lastName: this.lastName,
    };

а здесь html код;

<div *ngIf="univer.isOpenModal">
    <button (click)="univer.isOpenModal = false">Закрыть модальное окно</button>
    <h1>Ученики {{ univer.nameOfUniversity }}</h1>

    <button (click)="addStudent()">Добавить ученика</button>
    <input type="number" hidden [(ngModel)]="univer.id" />
    <input type="text" [(ngModel)]="firstName" />
    <input type="text" [(ngModel)]="lastName" />
    <div *ngFor="let student of univer.students">
      <div>{{ student.firstName }}</div>
      <div>{{ student.lastName }}</div>
      <button (click)="removeStudent(student.id!)">
        Удалить этого ученика
      </button>
    </div>
  </div>

а вот сам интерфейс:

export interface IStudent {
  id?: number;
  firstName: string;
  lastName: string;
  universityId?: number;
}

[Сергей delphinpro]

laravel_creative_3103,

<button (click)="addStudent(univer.id)">Добавить ученика</button>

addStudent(id) {
    const newStudent: IStudent = {
      id,
      firstName: this.firstName,
      lastName: this.lastName,
    };