TypeScript - Angular: багаторядковий рядок


77

Я початківець 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;
    }
}

Це працює, коли я заходжу в браузер "Макс Браун відображається".

Тепер я хочу написати частину шаблону в різних рядках, як це:

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

Відповіді:


189

Оберніть текст `(зворотні позначки) замість одинарних лапок ', тоді він може охоплювати кілька рядків.

var myString = `abc
def
ghi`;

це працює у мене .... але чому це неможливо зі звичайним '' як у будь-якій іншій мові? наприклад сам JS ...
messerbill 02

3
Здається, ви можете використовувати звичайні котирування stackoverflow.com/questions/805107/… . Зворотні посилання також дозволяють інтерполяцію developer.mozilla.org/en/docs/Web/JavaScript/Reference/…
Günter Zöchbauer 02

6
як я можу ігнорувати пробіли та нові рядки?
Суніл Гарг,

Вибачте, я не розумію питання. Чому б ви додавали їх спочатку, якщо не хочете. Я не розумію, яку проблему ти намагаєшся вирішити.
Günter Zöchbauer

2
Це було б протилежним тому, що стосується моєї відповіді. Думаю, для цього потрібно було б'a b c' + 'd e f'
Гюнтер Цьохбауер
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.