angular2：找不到属性绑定

Question

I'm getting this message from angular2 when component+template is rendered:

Can't bind to 'type' since it isn't a known property of 'alert'.

I've created this component:

interface Alert {
    type: string;
    msg: string;
}

@Component({
  selector: 'signin',
  styleUrls: [ './signin.style.scss' ],
  templateUrl: './signin.template.html',
  encapsulation: ViewEncapsulation.None,
  host: {
    class: 'signin-page app'
  }
})
export class Signin implements OnInit {

    private form:FormGroup;
    private alerts: Array<Alert>;

    constructor(private fb: FormBuilder, private commty: UsersService) {}

    ngOnInit():void {
        //...
    }

    private addAlert(message: string): void {
        this.alerts.push({type: 'danger', msg: message});
    }

    public closeAlert(index): void {
        this.alerts.splice(index, 1);
    };
}

The related html template code is:

<alert *ngFor="let alert of alerts; let i = index" [type]="alert.type + ' alert-sm'" (close)="closeAlert(i)" dismissible="true">
    <div [innerHTML]="alert.msg"></div>
</alert>

Answer 1

type is not default attr of html dom element(alert dom is shadow dom )

https://developer.mozilla.org/en-US/docs/Web/Web_Components/Shadow_DOM

<alert *ngFor="let alert of alerts; let i = index" [attr.type]="alert.type + ' alert-sm'" (close)="closeAlert(i)" dismissible="true">
    <div [innerHTML]="alert.msg"></div>
</alert>