'Element'에서 'setAttribute'를 실행하지 못했습니다. ']'은(는) 올바른 특성 이름이 아닙니다. 각 4

'Element'에서 'setAttribute'를 실행하지 못했습니다. ']'은(는) 올바른 특성 이름이 아닙니다. 각 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이 위에 있습니다.

저는 또한 버튼을 나란히 정확하게 잡을 수 없습니다.

[(ngModel)]="model.description"]']'가 불필요하게 추가됩니다.

로 변경합니다.

[(ngModel)]="model.description"

네모난 괄호로 싸지 마세요.

업데이트:

초기화할 수 있습니다.model당신의 필요에 따라 다음과 같이 변합니다.

model:ModalComponentModel=<ModalComponentModel>{};

OR

model:ModalComponentModel=<ModalComponentModel>[];

문제는 이 줄에 있습니다.

바꾸다

부터

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

로.

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

다음 코드 라인에 문제가 있습니다.

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

다음과 같아야 합니다.

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

이 오류의 원인이 되는 추가 브래킷이 있습니다.

나의 경우에는.<app-some-component []></app-some-component>공허한 사람들[]문제의 원인이 되었습니다.

이 경우 테이블 요소의 속성 목록에 0이 삽입되었습니다.그래서 돔은 0을 테이블의 속성으로 취급하려고 했습니다.제거하여 문제를 해결했습니다.두 사람이 그 벌레를 찾는데 3시간을 보냈습니다.

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

잘못된 위치에 쉼표를 두면 다음과 같은 문제가 발생합니다.

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

저 같은 경우에는 문을 닫지 않았습니다.]ngModel.코드를 잘못 사용했습니다.

[(ngModel)="selectedTestName"

올바른 구문:

[(ngModel)]="selectedTestName"

디렉티브 호스트에 속성을 추가할 때 오타가 발생했습니다.

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

사용하지 않는 문자, 괄호, 쉼표 또는 기타 항목을 추가하지 마십시오. 동일한 문제가 발생합니다.

예:

<h1 *ngIf="check" ,><h1>

나의 경우에는,동일한 오류를 발생시킵니다.

오류 돔 예외:'Element'에서 'setAttribute'를 실행하지 못했습니다. '['은(는) 올바른 특성 이름이 아닙니다.

이 오류는 많은 것에 의해 발생하지만 나는 2건의 경우를 얻었습니다.

1. 태그가 [src]="의 한 줄에 가깝지 않은 경우

상위 html에서 나는 src를 닫지 않았습니다 [같은 줄에서 그래서 나는 오류 2를 표시합니다. 만약 당신이 [src] 적절한 닫힘이 아니라면.

제가 이 문제에 직면한 이유는[그리고.attributeName같은 라인에 있지 않습니다.수동 형식을 사용하여 속성 이름을 다음 줄에 보냈습니다.그것이 테스트 케이스 실패의 이유입니다.

그냥 확인하세요.[attributeName]="value"이 문제를 해결하려면 동일한 라인에 있어야 합니다.

제 경우에는 댓글 닫기 태그 때문이었습니다.-->구성 요소 선택기 태그의 왼쪽 안쪽

    <app-my-component-name [alignment]="'absolute'" --> // HERE
         [customClass]="'foo'">
    </app-my-component-name>

추가 ']'는 아마도 자동 완성에서 나온 것 같습니다.그런 일은 저에게 한두 번이 아닙니다.

언급URL : https://stackoverflow.com/questions/45802404/failed-to-execute-setattribute-on-element-is-not-a-valid-attribute-name