Невозможно прочитать свойства неопределенного (чтение «getAttribute») матового флажка

Я пытаюсь использовать некоторые компоненты Angular Material, такие как mat-checkbox, но когда я устанавливаю пользовательский атрибут, я получаю

Cannot read properties of undefined (reading 'getAttribute')

Используемый код такой, какой он есть:

<li *ngFor="let instancia of tipo_maquina.instancias">
    <mat-checkbox 
     (change)="onCheckChange($event, $event.source, $event.checked)"
     [attr.typeid]="instancia.id">
      {{instancia.nombre}}
    </mat-checkbox>
</li>
onCheckChange(event: any, checkbox: MatCheckbox, isChecked: boolean){
    console.log("check event")
    console.log(event.target.getAttribute('typeid'));
}

Что вы видите, когда просто регистрируете event.target? (PS: это похоже на запах кода.. зачем вам это нужно?)

MikeOne 17.05.2022 19:15

Лучше было бы забыть об использовании атрибута и просто сделать onCheckChange($event, instancia.id)..?

MikeOne 17.05.2022 19:20

@MikeOne возвращает неопределенное значение

Josué Venegas 17.05.2022 19:43

Тогда это объясняет. Только событие? В любом случае, если честно, я бы просто пошел на свой второй комментарий.

MikeOne 17.05.2022 19:44

@MikeOne о боже... ты абсолютно прав. Я собираюсь сделать это. Большое спасибо!

Josué Venegas 17.05.2022 19:46

Прохладно. Удачного кодирования!

MikeOne 17.05.2022 19:48
Формы c голосовым вводом в React с помощью Speechly
Формы c голосовым вводом в React с помощью Speechly
Пытались ли вы когда-нибудь заполнить веб-форму в области электронной коммерции, которая требует много кликов и выбора? Вас попросят заполнить дату,...
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Будучи разработчиком веб-приложений, легко впасть в заблуждение, считая, что приложение без JavaScript не имеет права на жизнь. Нам становится удобно...
Flatpickr: простой модуль календаря для вашего приложения на React
Flatpickr: простой модуль календаря для вашего приложения на React
Если вы ищете пакет для быстрой интеграции календаря с выбором даты в ваше приложения, то библиотека Flatpickr отлично справится с этой задачей....
В чем разница между Promise и Observable?
В чем разница между Promise и Observable?
Разберитесь в этом вопросе, и вы значительно повысите уровень своей компетенции.
Что такое cURL в PHP? Встроенные функции и пример GET запроса
Что такое cURL в PHP? Встроенные функции и пример GET запроса
Клиент для URL-адресов, cURL, позволяет взаимодействовать с множеством различных серверов по множеству различных протоколов с синтаксисом URL.
Четыре эффективных способа центрирования блочных элементов в CSS
Четыре эффективных способа центрирования блочных элементов в CSS
У каждого из нас бывали случаи, когда нам нужно отцентрировать блочный элемент, но мы не знаем, как это сделать. Даже если мы реализуем какой-то...
0
6
19
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Тип $event должен быть MatCheckboxChange, и он имеет 2 свойства.

    /** Change event object emitted by MatCheckbox. */
    export declare class MatCheckboxChange 
    {
        /** The source MatCheckbox of the event. */
        source: MatCheckbox;
        
       /** The new `checked` value of the checkbox. */
        checked: boolean;
    }

Таким образом, цель не существует на MatCheckboxChange, и вы получите сообщение об ошибке ошибка TS2339: "Цель свойства" не существует для типа "MatCheckboxChange".

Как предложил @MikeOne, просто передайте instancia.id методу onCheckChange($event, instancia.id).

Другие вопросы по теме