Как динамически изменить Angular2 HTML?

Question

Как динамически изменить Angular2 HTML?

1

Я пытаюсь найти способ динамически изменять некоторые 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 для создания динамических компонентов, но я нашел его слишком подавляющим только для двух строк 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-теги угловыми атрибутами динамически?

gog 05 июль 2017, в 16:09

Источник

2

Пожалуйста, используйте тег angularjs только для версии 1.x (уже пометили этот вопрос). Спасибо
Alon Eitan 05 июль 2017, в 14:05
2

Лучше избегать таких манипуляций с DOM, как это, есть директивы ng для динамического html. Угловой способ сделать это состоит в том, чтобы связать HTML-код с переменной контроллера, и функция щелчка изменит содержание переменной. Изменения должны отражаться автоматически
Kaddath 05 июль 2017, в 14:08

Теги:

angular

javascript

angular2-template

2 ответа

Ещё вопросы

Пожалуйста, используйте тег angularjs только для версии 1.x (уже пометили этот вопрос). Спасибо
Лучше избегать таких манипуляций с DOM, как это, есть директивы ng для динамического html. Угловой способ сделать это состоит в том, чтобы связать HTML-код с переменной контроллера, и функция щелчка изменит содержание переменной. Изменения должны отражаться автоматически

SrAxi · Answer 1 · 2017-07-05T11-46-00.000Z

Вы можете динамически обращаться к 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 свойств или лиц, то будет несколько caothic.

Проверьте Plunker

Хороший обходной путь. Это хорошо работает для свойства person, но я не уверен, что удастся разрешить замену кнопки.
Вы можете заменить кнопку на <select> где каждый <option> является свойством объекта person , например: Age, Name, Surname и т. Д. И, onChange() для select, вы запускаете getProperty() передавая как параметр значение <option> .
Таким образом, у вас будет много элементов <li> (по одному для каждого person в вашем объекте persons ) и простой выпадающий список ( <select> ) .

Subtain Ishfaq · Answer 2 · 2017-07-05T11-20-00.000Z

Используйте 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
         }

но если у меня будет 10 <li> рендеров. Все они изменятся, если я нажму на одну из них?
@gog Попробуйте отредактированный ответ, надеюсь, он подойдет для вашего случая