Как я могу правильно использовать Observable, чтобы не получать ошибок при попытке доступа к значению ключа объекта?

Это компонент

export class ButtonGroupComponent implements OnInit {

@Input() items: Array<Object>;

constructor(private el: ElementRef) {
}

ngOnInit(){
    console.log('this.constructor.name ' + this.constructor.name);
    console.log(this.items);

}

onParentClick(index) {
    let items = this.items;
    Observable.of(items).subscribe(items => {
        this.el.nativeElement.dispatchEvent(new CustomEvent(items[index].eventName, {}));
        console.log( items[index].eventName );
    });
}

А это шаблон:

<custom-button  *ngFor="let el of items ; let i = index"
            type="{{el.type}}"
            btnName="{{el.btnName}}"
            btnIcon="{{el.btnIcon}}"
            disabled="{{el.disabled}}"

            (childClickEvent)="onParentClick($event)"
            [index]="i"
            [item]="item"
>
</custom-button>

'items' - это массив объектов, который поступает от хоста pt-button-group и описывает, какие кнопки будут на странице.

Чтобы узнать, какая кнопка группы была нажата, компонент отправляет индекс объекта, который соответствует нажатой кнопке, и описание имени события этой кнопки.

Когда я компилирую, я получаю двойную ошибку:

error TS2339: Property 'eventName' does not exist on 
type 'Object'

но как это возможно? Предполагается, что наблюдаемые должны быть синхронизированы, верно? Я неправильно написал, что Observable? Как я могу получить значение eventName без ошибок?


angular observable rxjs6
person Nad G    schedule 20.07.2018    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Вы объявили items как массив объектов, где собственный объект не имеет свойства eventName. Попробуйте с фиктивным приведением к any:

onParentClick(index) {
    let items = this.items;
    Observable.of(items).subscribe(items => {
        this.el.nativeElement.dispatchEvent(new CustomEvent((items[index] as any).eventName, {}));
        console.log( (items[index] as any).eventName );
    });
}

После этого у вас не должно быть ошибки компиляции, но вы все равно можете получить ошибку времени выполнения. Если это так, вы должны дважды проверить фактический тип свойства, переданного этому компоненту через @Input, потому что это может быть так, у них действительно нет свойства eventName.

person Tomas    schedule 20.07.2018

arrow_upward
1
arrow_downward

Вам нужно разыграть items с any:

onParentClick(index) {
    let items = this.items;
    Observable.of(items).subscribe((items: any) => {  //<======= here you can set any
        this.el.nativeElement.dispatchEvent(new CustomEvent(items[index].eventName, {}));
        console.log( items[index].eventName );
    });
}
person Sanoj_V    schedule 20.07.2018