Angular2 - Удалить строку или столбец Когда нажата кнопка удаления

Question

Мы можем легко удалить что-то подобное с помощью jquery, но можем ли мы использовать угловые для выполнения чего-то подобного?

<tr> 
<td *ngFor="#lev of rubric?.criteria[0].levels"> 
        <button class="close removeLevel" (click)="onClickRemove($event)">&times;</button> 
        <input type="text" class="form-control" placeholder="Performance Level" 
          #level="ngForm" 
          [(ngModel)]="lev.level" 
          ngControl="level" 
        /> 
</td> 
</tr> 

И в Component.ts:

onClickRemove($event) { 
} 

Как я могу получить доступ строки или ячейки элемента здесь, откуда событие был поднят?

Answer 1

С вашего вопроса вы хотите удалить строку при нажатии кнопки удаления. Угловой способ, который вы должны делать, - удалить запись из модели. Поэтому для этого просто передайте идентификатор строки для чего-то уникального для ng-контроллера и удалите его из модели.

Так что если у вас есть что-то вроде ниже

<td *ngFor="#lev of rubric?.criteria[0].levels"> 
        <button class="close removeLevel" ng-click="onClickRemove($index)">&times;</button> 
        <input type="text" class="form-control" placeholder="Performance Level" 
          #level="ngForm" 
          [(ngModel)]="lev.level" 
          ngControl="level" 
        /> 
</td> 

в контроллере

$scope.onClickRemove=function(index) 
{ 
    //Replace your model here 
    rows.splice(index, 1); 
} 

Answer 2

Прелесть использования рамки обнаружения изменений, как угловому является то, что вам нужно всего лишь изменить свои модели, и ваши мнения автоматически обновляются. Нет необходимости изменять DOM самостоятельно.

Вот как это работает:

• Угловые использует Zone.js для обезьяны патч (перехват) всех асинхронных событий браузера (например, щелчки мыши), которые происходят внутри Угловой. Таким образом, любые привязки событий, которые мы помещаем в наши компоненты, будут пропатчены обезьянами.
• Угловое построение дерева компонентов, и каждый узел в дереве также имеет объект детектора изменения (вы можете получить ссылку на него, введя ChangeDetectorRef). Он отслеживает все ваши привязки к представлению и запоминает последнее значение каждой привязки.
• Когда срабатывает событие, выполняется функция обработчика события/обратного вызова. Когда он заканчивается, из-за патча обезьяны Zone.js, он затем вызывает алгоритм обнаружения изменений Углового. Этот алгоритм перемещает дерево (один раз) и ищет изменения с помощью этих объектов детектора изменения. Если он находит какие-либо изменения, он обновляет компонент, если необходимо (например, при изменении свойства ввода), а затем обновляет DOM.
• Смена обнаружения завершается, браузер снова получает контроль, видит изменения DOM и обновляет то, что вы видите на экране.