Не удалось выполнить 'setAttribute' в 'Element': ']' не является допустимым именем атрибута. угловой 4

Я получаю следующую ошибку:

Failed to execute 'setAttribute' on 'Element': ']' is not a valid attribute name.

Я просто сделал модель:

export interface ModalComponentModel {
    username: string;
    password: string;
    password2: string;
    description: string;
}

Я использовал его в своем компоненте:

составная часть:

model: ModalComponentModel;

Затем я попытался использовать его в своем html файле:

    <div class="modal-header">
    <h4 class="modal-title text-center">Edit Profile</h4>
    <button type="button" class="close" aria-label="Close" (click)="activeModal.dismiss('Cross click')">
        <span aria-hidden="true">&times;</span>
    </button>
</div>
<div class="modal-body">
    <div class="row">
        <div class="col-md-2 col-md-offset-2">
            <form class="form" role="form" (ngSubmit)="whatDoesThisFormDo()">
                <div class="form-group">
                    <label for="username">Username</label>
                    <input type="text" class="form-control" name="username" id="username" placeholder="Your username"
                           [(ngModel)]="model.username">
                </div>
                <div class="form-group">
                    <label for="password1">Password</label>
                    <input type="password" class="form-control" name="password1" id="password1" placeholder="Your password"
                           [(ngModel)]="model.password">
                </div>
                <div class="form-group">
                    <label for="password2">Confirm Password</label>
                    <input type="password" class="form-control" name="password2" id="password2" placeholder="Your password"
                           [(ngModel)]="model.password2">
                </div>
                <div class="form-group">
                    <textarea rows="4" cols="50" placeholder="Description" [(ngModel)]="model.description"]></textarea>
                </div>
                <div class="row">
                    <div class="col-xs-1">
                        <button value="update" type="button" class="btn btn-primary pull-left">Update</button>
                    </div>
                    <div class="col-xs-1">
                        <button value="cancel" type="button" class="btn btn-primary pull-left">Cancel</button>
                        <div class="clear"></div>
                    </div>
                </div>

            </form>
        </div>
    </div>
</div>
<div class="modal-footer">
    <button type="button" class="btn btn-outline-dark" (click)="activeModal.close('Close click')">Close</button>
</div>

Он работал нормально до тех пор, пока я не добавил к модели, полный HTML-код указан выше.

Я также не могу правильно использовать кнопки рядом.

Ответы

Ответ 1

[(ngModel)]="model.description"]//']' добавляется излишне

измените его на

[(ngModel)]="model.description"

Не заверните его в квадратную скобку.

Обновить:

Вы можете инициализировать свою переменную model следующим образом, в соответствии с вашими потребностями,

model:ModalComponentModel=<ModalComponentModel>{};

ИЛИ ЖЕ

model:ModalComponentModel=<ModalComponentModel>[];

Ответ 2

Проблема в этой строке

+ Изменить

От

  <textarea rows="4" cols="50" placeholder="Description" [(ngModel)]="model.description"]></textarea>

  <textarea rows="4" cols="50" placeholder="Description" [(ngModel)]="model.description"></textarea>

Ответ 3

У вас проблема в этой строке кода:

<textarea rows="4" cols="50" placeholder="Description" [(ngModel)]="model.description"]></textarea>

Так должно быть:

<textarea rows="4" cols="50" placeholder="Description" [(ngModel)]="model.description"></textarea>

Существует дополнительная скобка, которая вызывает эту ошибку.

Ответ 4

В моем случае я вставил 0 в список атрибутов элемента таблицы. Таким образом, дом пытался рассматривать 0 как атрибут таблицы. Удаление это решило проблему. Два человека потратили 3 часа на поиск ошибки.

<table style="width:100%" 0>

Ответ 5

Я получил эту ошибку от опечатки при попытке добавить атрибут к хосту директив.

@Directive({
  ...
  host: {    
    '[style.touchAction' <-- missing closing bracket : '"none"',
  }
})