Угловой 5 не может сбросить родительский объект после ввода в компонент. - PullRequest
0 голосов
/ 04 октября 2018

Итак, у меня есть родительский компонент, который отправляет объект назначения в компонент add-contact-popover, когда вы нажимаете кнопку add-contact-button.То есть три компонента.Один родитель, двое детей.

Я добавил ngIf в add-contact-popover, где, если присвоение имеет свойство 'isClicked' true, тогда is отправляет данные на вход add-contact-popover.

Это хорошо работает.Когда вы нажимаете кнопку отмены на всплывающем окне, я хочу установить для объекта назначения значение .isClicked = false;а потом убери поповер.При повторном щелчке по тому же назначению или любому другому назначению процесс должен начаться заново с нового ввода, поступающего от родителя.

Проблема заключается в том, что вы нажимаете кнопку отмены на всплывающем окне.Происходит следующее: объект является первым предыдущим назначением, а затем его новым назначением.Так как-то хранит предыдущие объекты в памяти?Это очень странно.И сложно объяснить.Я покажу консоль из браузера, а затем классы.

Итак, на изображении: все эти клики каждый раз выполняются на разных назначениях!

При первом щелчке родительский элемент устанавливает «isclicked» = true и отправляет дочерний элемент.Это консоль вошла и всплывающее окно появляется.Я нажимаю на отмену.

при втором щелчке консоль записывает предыдущее назначение (Которое имеет 'isClicked' = false btw), а затем я получаю новое назначение от родителя.

при третьем щелчке оно записывает консольдва предыдущих назначения (оба имеют isClicked = false), а затем я получаю новое назначение от родителя.

Почему это ??

enter image description here

ParentComponent:

@Component({
selector: 'assignment-list',
template: `
<tr *ngFor="let assignment of assignmentList">
        <td class="actions">
                <div (click)="sendToChild(assignment)" style="display: inline">
                    <add-contact-button-component></add-contact-button-component>
                </div>
                <add-assignment-contact-popover *ngIf="assignment.isClicked" [dataFromAssignmentList]="assignment"></add-assignment-contact-popover>
        </td>
</tr>
`
})

export class AssignmentList implements OnInit {

sendToChild(data: AssignmentListItem) {
    data.isClicked = true;
    console.log('sendingToChild');
  }
}

add-contact-popover

    @Input() dataFromAssignmentList: AssignmentListItem;


ngOnInit() {
    this.resetValues();

    //Clickservice for knowing when createbutton is pushed.
    this.buttonClickService.showAddContactPopOver.subscribe((addContactCLick: boolean) => {
        if (addContactCLick) {

            this.addValuesToPopover(this.dataFromAssignmentList);
        }
    });
}

addValuesToPopover(assignmentObject: AssignmentListItem) {
    console.log('assignmentObject', assignmentObject);
}

    onCancel() {
    this.dataFromAssignmentList.isClicked = false;
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...