首页 文章

角度成分发射超过预期?

提问于
浏览
1

我有一个我正在使用的组件,其中包含一个记录表 . 此表中的每一行都有一个编辑按钮,允许通过模态编辑内容 .

我在我的函数中抛出了 console.log ,它呈现了我的模态的内容,我注意到了一些奇怪的行为 . 每当我打开一个关闭模态时,我的 console.log 似乎每次点击都会激发额外的时间 . 例如,在加载时,我单击 Edit . 结果在 console.log('test'); . 如果我关闭模态并再次单击编辑(清除控制台),我会得到两个 console.log('test'); 实例 .

我有点怀疑某些事情是不能正常工作而且被解雇的次数超过了应有的程度 .

Results Table Component:

<!-- Loading Indicator -->
<div *ngIf="!exceptions" class="loader" align="center">
    <img src="images/loading-bars.svg" alt="" />
</div>
<!-- Loading Indicator -->

<!-- Active Exceptions -->
<span *ngIf="exceptions">
    <table class="table table-condensed" *ngIf="exceptions.activeExceptions">
        <thead>
            <tr>
                <th class="small">Employee</th>
                <th class="small">Start Date</th>
                <th class="small">End Date</th>
                <th class="small">Exception Outcome</th>
                <th class="small">Action</th>
            </tr>
        </thead>
        <tbody>
            <tr *ngFor="let e of exceptions.activeExceptions.data">
                <td [innerHtml]="e.EmpNTID | ntidLink"></td>
                <td class="small">{{ e.ExceptionStartDate }}</td>
                <td class="small">{{ e.ExceptionEndDate === '2050-12-31' ? 'Indefinitely' : e.ExceptionEndDate }}</td>
                <td class="small"><strong>{{ e.Value }}</strong></td>
                <td class="small">
                    <button type="button" class="btn btn-default btn-xs" (click)="doEditException(e)">
                    <i class="fa fa-pencil"></i>&nbsp;&nbsp;Edit Exception
                    </button>
                </td>
            </tr>
        </tbody>
    </table>
    <!-- Active Exceptions -->

    <!-- No Active Exceptions -->
    <span *ngIf="!exceptions.activeExceptions">
        <div class="alert alert-warning"><i class="fa fa-comment padRight"></i>No Active Exceptions</div>
    </span>
    <!-- No Active Exceptions -->

</span>

Component Associated with this Table Data:

export class ActiveExceptionsComponent implements OnInit {

    @Input() exceptions: any;
    @Output() doEdit:EventEmitter<any> = new EventEmitter();

    constructor(
        public bsModalRef: BsModalRef,
        private modalService: BsModalService,
        private _mapsService: MapsService,
    ) {
    }

    ngOnInit() {
        //
    }

    /**
     * On "Edit" of an exception, trigger our modal.
     * The modal will include its own component.
     * 
     * @param {any} $event 
     * @memberof ExceptionsComponent
     */
    doEditException($event) {

        // Call our modal, pass the EditExceptionModalComponent
        this.bsModalRef = this.modalService.show(EditExceptionModalComponent);

        // Call next on our behavior subject to update the modal subscriber data
        this._mapsService.updateExceptionModalData({
            event: $event,
            exceptionTypes: this.exceptions.exceptionTypes
        });

    }

编辑按钮单击绑定到 doEditException 方法,并使用另一个组件加载模态的内容 .

Modal Component:

export class EditExceptionModalComponent implements OnInit {

    exceptionForm: FormGroup;
    modalData: any;

    // Configuration for the date pickers
    datesConfig = {
        'format': 'YYYY-MM-DD',
        'placeholder': 'Choose a date...'
    }

    constructor(
        private fb: FormBuilder,
        public bsModalRef: BsModalRef,
        private _mapsService: MapsService,
    ) { }

    ngOnInit() {

        // Subscribe to the modal data received from the active/future exceptions component
        this._mapsService.uiExceptionModalData.subscribe(
            results => {
                if (results) {
                    this.modalData = results;
                    this.renderForm();
                }
            }
        );

    }

    /**
     * Render the form for the contents of the modal
     * 
     * @memberof EditExceptionModalComponent
     */
    renderForm() {

        console.log('here'); <---- Each time the parent component edit button is clicked, this method gets executed 1 more time than previous.

        // Determine if this exception expires or not
        let isIndefinite = (this.modalData.event.ExceptionEndDate == '2050-12-31' ? true : false);

        // Render our modal form
        this.exceptionForm = this.fb.group({
            outcome: [[{ text: this.modalData.event.Value, id: this.modalData.event.MappedValue }]],
            startDate: this.modalData.event.ExceptionStartDate,
            endDate: [{ value: (!isIndefinite ? this.modalData.event.ExceptionEndDate : ''), disabled: (isIndefinite  ? true : false) }],
            indefinite: (isIndefinite ? '1' : ''),
            exceptionUser: this.modalData.event.QID,
            exceptionID: this.modalData.event.ExceptionID,
            targetID: this.modalData.event.TargetID,
        });

    }

}

最后,模态内容的HTML:

<div *ngIf="modalData">
    <div class="modal-header text-center">
        <h4 class="modal-title">Edit Exception</h4>
        <small>Editing rule exception for <strong>{{ modalData.event.EmpName }}</strong></small>
    </div>
    <div class="modal-body">
        <form [formGroup]="exceptionForm" #f="ngForm">
            <div class="form-group">
                <label for="exceptionOutcome">Exception Outcome</label>
                <ng-select formControlName="outcome" [allowClear]="false" [items]="getExceptionTypes()" placeholder="Select an Exception Outcome">
                </ng-select>
            </div>
            <div class="form-group noBottomMargin">
                <label for="exceptionStartDate">Start Date</label>
                <input type="text" class="form-control input-sm" formControlName="startDate" [dpDayPicker]="datesConfig" theme="dp-material"
                    placeholder="Choose a Start Date">
            </div>
            <div class="form-group noBottomMargin">
                <label for="exceptionEndDate">End Date</label>
                <div class="input-group">
                    <input type="text" class="form-control input-sm" formControlName="endDate" [dpDayPicker]="datesConfig" theme="dp-material"
                        placeholder="Choose a End Date">
                    <div class="input-group-addon"><input type="checkbox" (click)="toggleIndefiniteCheckbox(true)" value="1" formControlName="indefinite" [value]="value" [attr.checked]="value" id="indefinitely"> Indefinitely</div>
                </div>
            </div>
            <input type="hidden" formControlName="exceptionID">
            <input type="hidden" formControlName="targetID">
        </form>
    </div>
    <div class="modal-footer">
        <button type="button" class="btn btn-default" (click)="bsModalRef.hide()">Close</button>
        <button type="button" class="btn btn-primary" (click)="saveChanges(exceptionForm.getRawValue())">Save changes</button>
    </div>
</div>

我关注的是每次加载模态时多次调用 renderForm 方法,每次在父项中触发 doEditException 方法时,都会增加1 .

我是通过不正确结束或重置某些内容而导致此行为的?我的期望是,如果我单击父组件中的"Edit"按钮,我只会看到子项中的 renderForm 方法只被调用一次 . 这似乎不是我的 console.log 在该方法中每次增加的情况 .

1 回答

  • 1

    问题是您没有取消订阅结果订阅 . 您的模态被销毁时需要取消订阅 .

    In your Modal Component:

    import { Subscription } from 'rxjs/Subscription';
    // ....
    
    private sub: Subscription;
    ngOnInit() { 
        // Subscribe to the modal data received from the active/future exceptions component
        this.sub = this._mapsService.uiExceptionModalData.subscribe(
            results => {
                if (results) {
                    this.modalData = results;
                    this.renderForm();
                }
            });
    }
    
    ngOnDestroy() {
        // Unsubscribe here.
        this.sub.unsubscribe();
    }
    

相关问题