listagem.component.html

<p *ngIf="mensagem.length" class="alert alert-info">{{mensagem}}</p>

listagem.component.ts

import { Component } from '@angular/core';
import { FotoService } from '../foto/foto.service';
import { FotoComponent } from '../foto/foto.component';

@Component({
    moduleId: module.id,
    selector: 'listagem',
    templateUrl: './listagem.component.html'
})
export class ListagemComponent {

    service: FotoService;

    fotos: FotoComponent[] = [];

    mensagem: string;

    constructor(service: FotoService) {
        this.service = service;

        this.service
            .lista()
            .subscribe(fotos => {
                this.fotos = fotos;
            }, erro => console.log(erro));
    }

    remove(foto: FotoComponent) {
        this.service
            .remove(foto)
            .subscribe(() => {
                let novasFotos = this.fotos.slice(0);
                let indice = novasFotos.indexOf(foto);
                novasFotos.splice(indice, 1);
                this.fotos = novasFotos;
                this.mensagem = 'Foto removida com sucesso!';
            },
            erro => {
                this.mensagem = 'Não foi possível remover a foto';
                console.log(erro);
            }
            );
    }
}

resultado:

EXCEPTION: Uncaught (in promise): Error: Error in http://localhost:3000/app/listagem/listagem.component.html:7:5 caused by: self.context.mensagem is undefined

Quando removo ngIf, a mensagem é preechida corretamente após clicar no botão 'remover'.