Question

我是一个angular2初学者，我在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”时，它可以工作。现在我想在不同的行上编写模板部分，如下所示：

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

Answer 1

将文字换成`（反引号）而不是单引号'，然后它可以跨越多行。

var myString = `abc
def
ghi`;

Answer 2

这个呢？这将解决新行中的空白空间。但可能有点不可读并且会影响性能。

    let myString =
      `multi${""
      }line${""
      }string`;

Answer 3

使变量如下

firstName ='';
lastName = '';

打字稿的多行字符串 - Angular2

3 个答案: