Solución:
Angular simplemente ignorará la adición de marcado específico de Angular agregado dinámicamente en tiempo de ejecución. Fijaciones como [phantomOp]="myItems" [myOper]="oper" son procesados por Angular solo cuando se compila un componente. Normalmente (con AoT) esto es antes de implementar su aplicación.
¿Cómo puedo usar / crear una plantilla dinámica para compilar un componente dinámico con Angular 2.0? explica cómo compilar un componente en tiempo de ejecución.
Puede simplemente introducir un campo en su componente
isClicked:boolean = false;
agregue esto a su elemento estáticamente
[phantomOp]="isClicked ? myItems : null" [myOper]="isClicked ? oper : null"
y en el controlador de clic
(click)="isClicked=true"
Recientemente me encontré con una situación similar. Quería agregar y eliminar dinámicamente el capture atributo en un FileInput. Ahora solo la presencia del capture atributo y la entrada de archivo caerá al modo de captura, por lo que tener el valor como nulo o ” no funcionó para mí.
Así es como finalmente lo hice funcionar. solía @ViewChild y ElementRef. En tu caso sería algo como:
<div #yourContainer class="container">
<ul>
<li> Albums </li>
<li> Dates </li>
</ul>
</div>
<button (click)="addContainerAttributes"> Add Container Attributes </button>
Entonces en el TS
import { Component, ElementRef } from '@angular/core';
@Component({
selector: 'app-your-component',
templateUrl: './your-component.component.html',
styleUrls: ['./your-component.component.css']
})
export class YourComponent {
@ViewChild('yourContainer', {static:true}) yourContainer: ElementRef;
....
addContainerAttributes(){
// Not entirely sure what to put here
this.yourContainer.nativeElement.setAttribute('phantomOp', myItems);
this.yourContainer.nativeElement.setAttribute('myOper', oper);
}
// if you wish to completely remove the attribute dynamically
removeContainerAttributes(){
this.yourContainer.nativeElement.removeAttribute('phantomOp');
this.yourContainer.nativeElement.removeAttribute('myOper');
}
}