Question

我试图找到一种动态更改组件的某些html行的方法。

<li *ngFor="p in persons" [attr.id]="p.id">
   <span> {{ p.name }} </span>                      
   <a (click)="getAge(p.id)">Get Age<a/>     
</li>

如果用户点击Get Age链接，我想将相应li标记内的内容替换为：

<span> {{ p.OtherProperty }} </span> 
<a (click)="OtherMethod(p)">Call OtherMethod<a/>

我发现ComponentFactoryResolver来创建动态组件，但我发现它只有2行html太压倒性。我尝试使用jquery手动更改它，但它无法创建事件绑定：

getAge(id) { 
    //some work
    //remove the corresponding <li> content
    $('#' + id).append('<a (click)="getAnotherValue(p.name)">GetAnotherValue<a/>');
    $('#' + id).append('<span> {{ p.age}} </span>'); //this obviously doesnt work. But thats the ideia.
 }

那么如何动态地用角度属性替换一些html标签呢？

Answer 1

您可以像这样动态访问此人Object属性：

object[property]; // Where property is a string
// If property equals 'name', the above sentence would equal this:
object.name; // or `object['name'];`

所以，按照你的例子，你可以这样做：

export class App {
  persons = [
    {
     id: 1,
     name: 'John',
     age: 25
    },
    {
     id: 2,
     name: 'Mike',
     age: 30
    }
  ];
  selectedProperty = 'name';

  constructor() {
  }

  getProperty(prop) {
    this.selectedProperty = prop;
  }
}

在你的模板中你可以：

<div>
  <li *ngFor="let p of persons" [attr.id]="p.id">
    <span> {{ p[selectedProperty] }} </span>
    <br>
  </li>
  <button (click)="getProperty('age')">Get Age</button> 
  <button (click)="getProperty('name')">Get Name</button>
</div>

如果我理解得很好，这应该可以解决问题。你不能使用ngIf因为如果你有60个属性或人，那么就会有点哥特式。

Check the Plunker

Answer 2

使用ngIf激活代码，如下所示：

     <li *ngFor="p in persons" [attr.id]="p.id">

        <div *ngIf=!p?.touched>

             <span> {{ p.name }} </span>
             <a (click)="getAge(p)">Get Age<a/>
        </div>

        <div *ngIf=p?.touched>
            <span> {{ p.age}} </span> 
            <a (click)="getAnotherValue(p.name)">GetAnotherValue<a/>
       </div>  

     </li>

    isGetAgeClicked=false;

        getAge(person) { 
            //some work
            //remove the corresponding <li> content
         person.touched=true
         }

如何动态更改angular2 html？

2 个答案: