Question

我收到以下错误：

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在请求之上。

我也无法正确并排获取按钮。

Answer 1

[(ngModel)]="model.description"] //＆＃39;]＆＃39;不必要地添加

将其更改为

[(ngModel)]="model.description"

不要将它包裹在方括号内。

<强>更新

您可以根据需要初始化model变量，

model:ModalComponentModel=<ModalComponentModel>{};

OR

model:ModalComponentModel=<ModalComponentModel>[];

Answer 2

问题出在这一行

更改

发件人

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

以

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

Answer 3

您在这行代码中遇到问题：

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

应该是：

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

有一个额外的括号导致此错误。

Answer 4

在我的情况下，我在表格元素的属性列表中插入了0。因此，dom尝试将0视为表的属性。删除它可以解决此问题。两个人花了3个小时来寻找错误。

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

Answer 5

尝试将属性添加到指令主机时，我从错字中得到了这个错误。

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

Answer 6

错误 DOMException：无法在“元素”上执行“setAttribute”：“[”不是有效的属性名称。

因为这个错误是由很多事情产生的，但我得到的是两种情况

如果您的标签没有在 [ src]="" 的一行中关闭

在上层 html 我没有关闭 src [ 在同一行所以我显示错误 2.如果你没有关闭[src]适当关闭。

Answer 7

我遇到这个问题是因为 [ 和 attributeName 不在同一行。我的手动格式在下一行发送了属性名称。这就是测试用例失败的原因。

只需确保您的 [attributeName]="value" 应该在同一行以解决此问题。

Answer 8

就我而言，它是 <app-some-component []></app-some-component>。空的 [] 导致了问题。

Answer 9

就我而言，我没有在 ngModel 中关闭 ]。我使用了以下错误代码。

[(ngModel)="selectedTestName"

正确的语法：

[(ngModel)]="selectedTestName"

Answer 10

在错误的地方使用逗号也会导致此问题：

<span>
[(ngModel)]="item",
(click)="onClick()"
</span>

无法执行＆＃39; setAttribute＆＃39;在＆＃39;元素＆＃39;：＆＃39;]＆＃39;不是有效的属性名称。角4

10 个答案: