반응형
TypeScript - 각도:여러 줄의 문자열
저는 Angular 2 초보자이고, 이 코드를 제 코드에 썼습니다.dev/app.component.ts:
import {Component} from 'angular2/core';
@Component({
selector: 'my-app',
template: '<h3 (click)="onSelect()"> {{contact.firstName}} {{content.lastName}}</h3>'
})
export class AppComponent {
public contact = {firstName:"Max", lastName:"Brown", phone:"3456732", email:"max88@gmail.com"};
public showDetail = false;
onSelect() {
this.showDetail=true;
}
}
브라우저 "Max Brown is displayed"로 이동하면 동작합니다.
템플릿 부분을 다음과 같이 다른 행에 씁니다.
import {Component} from 'angular2/core';
@Component({
selector: 'my-app',
template: '<h3 (click)="onSelect()">
{{contact.firstName}} {{contact.lastName}}<h3>'
})
export class AppComponent {
public contact = {firstName:"Max", lastName:"Brown", phone:"3456732", email:"max88@gmail.com"};
public showDetail = false;
onSelect() {
this.showDetail=true;
}
}
그러나 Chrome 콘솔에서 다음 오류가 나타납니다.
Uncaught TypeError: Cannot read property 'split' of undefined
텍스트 줄 바꿈`작은 따옴표 대신 (backticks)'여러 줄에 걸쳐 있을 수 있습니다.
var myString = `abc
def
ghi`;
허용된 답변은 문자열에 \n을 추가하고 싶을 때만 기능합니다.긴 문자열에 \n을 추가하지 않고 내용을 줄바꿈으로 하는 경우에는 다음과 같이 각 행 끝에 \를 추가하십시오.
string firstName = `this is line 1 \
and this is line 2 => yet "new line" are not \
included because they were escaped with a "\"`;
console.assert(firstName == 'this is line 1 and this is line 2 => yet "new line" are not included because they were escaped with a "\"'); // true
참고 - 다음 줄(예시의 두 번째) 선두에 탭과 공백을 추가하지 마십시오.
const multiLineString = [
"I wish, ",
"There was a better way to do this!"
].join();
이건 어때?이것은, 새로운 행의 빈 공간을 중심으로 기능합니다.다만, 조금 읽기 어렵고, 퍼포먼스에 영향을 줄 수 있습니다.
let myString =
`multi${""
}line${""
}string`;
언급URL : https://stackoverflow.com/questions/35225399/typescript-angular-multiline-string
반응형
'programing' 카테고리의 다른 글
| .htaccess & WordPress: RewriteRule에서 폴더 제외 (0) | 2023.04.02 |
|---|---|
| fetch() 예기치 않은 입력 끝 (0) | 2023.04.02 |
| CSV/XLS를 JSON으로 변환하시겠습니까? (0) | 2023.04.02 |
| npm WARN referred tar@2.2.2: 이 버전의 tar는 더 이상 지원되지 않으며 보안 업데이트를 받지 않습니다.가능한 한 빨리 업그레이드해 주세요. (0) | 2023.04.02 |
| WP Tinymce 콘텐츠 가져오기 (0) | 2023.04.02 |