HTML Обвязка из трубы в Angular 8 - PullRequest
Новая
       24

HTML Обвязка из трубы в Angular 8

0 голосов
/ 20 января 2020 
transform(value, type, headerSelectArray = [], valueToBeSelected, hasAction = false, functionName) {
        try {
            if (type === '_field') {
                return value;
            } else if (type === '_select_attribute') {
                let options;
                options = (`<select ` + `(click)="updateStatus()"` + `>`);
                headerSelectArray.forEach(element => {
                    options += `<option value="` + element.key + `" selected="` + (element.key === valueToBeSelected) + `" >` + element.label + `</option>`;
                });
                options += `</select>`;
                return this.sanatize.bypassSecurityTrustHtml(options);
            }

        } catch (e) {
            console.log('Error--', e);
        }
    }

Это моя конвейерная функция, которая возвращает содержимое html на основе некоторых условий. Я связываю данные, используя внутреннее свойство Html в моем компоненте. html section.

Проблема, с которой я сталкиваюсь, заключается в том, что событие Click не связано с html. Нажмите здесь

Ответы [ 3 ]

1 голос
/ 20 января 2020

Вам нужно добавить этот фрагмент кода в вашу ngAfterViewChecked () функцию 

ngAfterViewChecked (){
 if(this.elementRef.nativeElement.querySelector('.my-select')){
  this.elementRef.nativeElement.querySelector('.my-select').addEventListener('click', this. updateStatus.bind(this));
 }
}

и в ваш конструктор 

 constructor(private elementRef:ElementRef){ }

и изменить свой код с помощью добавление атрибута id к вашему выбору 

 transform(value, type, headerSelectArray = [], valueToBeSelected, hasAction = false, functionName) {
    try {
        if (type === '_field') {
            return value;
        } else if (type === '_select_attribute') {
            let options;
            options = (`<select class=`"my-select"` ` + `(change)="updateStatus()"` + `>`);
            headerSelectArray.forEach(element => {
                options += `<option value="` + element.key + `" selected="` + (element.key === valueToBeSelected) + `" >` + element.label + `</option>`;
            });
            options += `</select>`;
            return this.sanatize.bypassSecurityTrustHtml(options);
        }

    } catch (e) {
        console.log('Error--', e);
    }
}
1 голос
/ 20 января 2020

Итак, вы пытаетесь отрендерить HTML на основе некоторых параметров, верно? В Angular компоненты делают именно это, и вам не следует взламывать каналы для этого. Каналы предназначены для создания простых текстовых значений из данных, см. https://angular.io/guide/pipes

Так что просто возьмите параметры, которые вы передаете в свою трубу, создайте компонент вместо трубы, и передать эти параметры новому компоненту .

Кроме того, всякий раз, когда вы вручную создаете строку html, а затем добавляете ее в DOM через innerHtml, вы неправильно используете angular, все точка angular, что вы явно не манипулируете DOM.

Обработчик щелчка не работает, потому что (click)="updateStatus() не является стандартным HTML, и если вы передаете его с помощью innerHtml, браузер не будет знать, о чем вы говорите. Этот синтаксис обработчика кликов работает только внутри шаблона angular, который вы можете иметь с компонентом.

0 голосов
/ 20 января 2020

Внутри @component set encapsulation: ViewEncapsulation.None

@Component({
  selector: "component-selector",
  templateUrl: "./x.component.html",
  styleUrls: ["./x.component.css"],
  encapsulation: ViewEncapsulation.None
})
...