Материал Модал в Угловая 6 - PullRequest
Новая
       42

Материал Модал в Угловая 6

0 голосов
/ 13 февраля 2019

Привет, я использовал Материал для создания модального в Angular 6, модель появится, когда нажата кнопка, но эффект размытия и положение элементов div не работают должным образом.Я новичок в Angular, поэтому я не знаю много.

Сценарий типа компонента (RemoveStudentComponent), вызывающего модальный режим: 

import { HttpClientModule, HttpClient } from '@angular/common/http';  
import { Component, OnInit } from '@angular/core';
import { Studs } from '../students';
import { StudentDetail } from '../studentdetail';
import { MatDialog } from '@angular/material';
import { DeleteConfirmationComponent } from '../delete-confirmation/delete-confirmation.component';

    @Component({
      selector: 'app-remove-student',
      templateUrl: './remove-student.component.html',
      styleUrls: ['./remove-student.component.css']
    })
    export class RemoveStudentComponent implements OnInit {

      constructor(private httpService: HttpClient,public dialog: MatDialog) { }
      students: string[];
      studs: Studs[] = [];
      chked: boolean = false;
      confirmation: boolean = false;
      msg : string = "<script>confirm('Do you want to delete selected students');</script>";

      ngOnInit() {
        this.selectall();
      }

      openDialog(): void {
        const dialogRef = this.dialog.open(DeleteConfirmationComponent, {});

        dialogRef.afterClosed().subscribe(result => {
          console.log('The dialog was closed');
        });
      }

      selectall() {
        this.httpService.get('http://localhost:49320/api/Student').subscribe(
          data => {
              this.students = data as string[];
          }
        ); 
      }

      isSelected(value: string) { }

      toggleVisibility(e) {
        if (e.target.checked) {
          this.studs.push(new Studs(e.target.id));
          if(this.studs.length > 0)
            this.chked=true;
        } else {
          this.studs = this.studs.filter(item => item.studentID !== e.target.id);
          if(this.studs.length == 0)
            this.chked = false;
        }
      }

      studentDelete() {
        this.studs.forEach(contact => {
            this.deleteCall(contact.studentID);
        });
      }

      deleteCall(id) {
        this.httpService.delete('http://localhost:49320/api/Student/' +id).subscribe(
          data => {
            this.selectall();
          }
        );
      }
    }

html модального триггера компонента: 

<div class="delete">
  <div class="row">
    <div *ngFor="let stud of students">
      <input type="checkbox" id="{{stud.StudID}}" value="{{stud.StudID}}" [checked]='isSelected(stud.StudID)' (change)="toggleVisibility($event)" /> {{stud.StudID}} : {{stud.FirstName}} {{stud.LastName}}
    </div>
  </div>
  <div  class="row" style="width:80px;left:160px;position:relative">
    <button (click)="openDialog();" class="delete_button" [disabled]="!chked" >Delete</button>
  </div>
</div>

Компонент (DeleteConfirmationComponent) действует как модальный: 

<mat-dialog-content>
  <p>Delete Selected Students ?</p>
</mat-dialog-content>
<mat-dialog-actions>
  <button >YES</button>
  <button>NO</button>
</mat-dialog-actions>
...