ngx-bootstrap модальный фон не определено - PullRequest
Новая
       11

ngx-bootstrap модальный фон не определено

0 голосов
/ 01 июня 2018

Я использую ngx-bootstrap.

editpatient.component.ts (Не весь код) 

import { Component, EventEmitter, Input, Output, ViewChild, AfterViewInit, OnInit } from '@angular/core';
import { NgForm, FormGroup, FormControl, ReactiveFormsModule, FormBuilder } from '@angular/forms';
import { ModalDirective } from 'ngx-bootstrap/modal';
import { PatientCard } from "../../../models/patientcard.model";

@Component({
    selector: 'editpatient',
    templateUrl: './editpatient.component.html',
})

export class EditPatientComponent {
    @Input('card') card: PatientCard;
    @Output() onEditingPatient = new EventEmitter<PatientCard>();

    @ViewChild('editCardModal') editCardModal: ModalDirective;
    editCardForm: FormGroup;

    constructor(private fb: FormBuilder) { }

    showEditPatientModal() {
        this.editCardModal.show();
    }

editpatient.component.html 

<div bsModal #editCardModal="bs-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="dialog-child-name">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 id="dialog-child-name" class="modal-title" id="editCardModal">Редактирование карты</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"></button>
            </div>
            <form [formGroup]="editCardForm" (ngSubmit)="editCard(editCardForm)">
                <div class="modal-body">
                    <div class="form-group">
                        <label for="card">Карта</label>
                        <input type="text" class="form-control" formControlName="card" id="card" required>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-warning" data-dismiss="modal" (click)="closeEditCardModal()">Закрыть</button>
                    <button type="submit" class="btn btn-success" [disabled]="!editForm.valid">Редактировать</button>
                </div>
            </form>
        </div>
    </div>
</div>

Patient.ponent.ts (Не весь код) 

import { Component, OnInit, ViewChild, ChangeDetectorRef, ApplicationRef, EventEmitter, Output, Input, TemplateRef } from '@angular/core';
import { PatientVisit } from '../../models/patientvisit.model';
import { PatientCard } from '../../models/patientcard.model';
import { CardsService } from '../../services/cards.service';
import { CategoriesService } from '../../services/categories.service';
import { Router, ActivatedRoute } from '@angular/router';
import { GenericCategory } from '../../models/genericcategory.model';
import { DoctorCategory } from '../../models/doctorcategory.model';
import { NgForm, FormGroup, FormControl, ReactiveFormsModule, FormBuilder } from '@angular/forms';
import { DiagnosisCategory } from '../../models/diagnosiscategory.model';
import { BsModalService } from 'ngx-bootstrap/modal';
import { BsModalRef } from 'ngx-bootstrap/modal/bs-modal-ref.service';
import { ModalDirective } from 'ngx-bootstrap';
import { MonthPicker } from '../../misc/monthpicker';
import { CHECKBOX_REQUIRED_VALIDATOR } from '@angular/forms/src/directives/validators';
import { AddVisitComponent } from "./addvisit/addvisit.component";
import { EditVisitComponent } from "./editvisit/editvisit.component";
import { EditPatientComponent } from "./editpatient/editpatient.component";

@Component({
    selector: 'patient',
    templateUrl: './patient.component.html'
})

export class PatientComponent implements OnInit {
    @ViewChild('deleteModal') deleteModal: ModalDirective;

    // Дочерние компоненты для модальных окон.
    @ViewChild(AddVisitComponent) addVisitComponent: AddVisitComponent;
    @ViewChild(EditVisitComponent) editVisitComponent: EditVisitComponent;
    @ViewChild(EditPatientComponent) editPatientComponent: EditPatientComponent;

    startEditCard() {
        try {
            this.editPatientComponent.card = this.card;
            this.editPatientComponent.showEditPatientModal();
        }
        catch (e) {
            alert(e);
        }
    }

Patient.ponent.html (Не весь код) 

<addvisit #addVisitComponent
          (onAdding)="addVisit($event)">
</addvisit>

<editvisit #editVisitComponent
           (onEditingVisit)="editVisit($event)"
           (onDeleting)="deleteVisit($event)">
</editvisit>

<editpatient #editPatientComponent
             (onEditingPatient)="editCard($event)">
</editpatient>

Если я вызываю startEditCard (), у меня появляется ошибка:

Невозможно прочитать свойство 'background' из undefined

У меня похожая ошибкадля editPatientComponent, но addVisitComponent работает нормально.(Компоненты похожи друг на друга)

...