javascript - typescript 内的 Angular 4.3(点击)语法

Question

我有一个看起来像这样的人员组件(非常简化):

person.component.html

<div *ngfor='let current of users'>
  <p>{{current?.name}} <a (click)='more(current?.id)'>Click for more</a>
   <span [id]='current?.id + "_info"'></span>
  </p>
</div>

person.component.ts

export class Person {
  constructor() { }
  more(id: any){
    let response = `more info <button class='btn btn-primary btn-sm' (click)="changeCurrent()">`;
    $('#' + id + '_info').html(response);
  }
  change() {
    console.log('hello world', this);
  }
}

当我单击“更多”按钮时，会触发 more(id) 并显示有关此人的更多信息。这样就可以了。

但是当我单击更改按钮时，change() 永远不会触发。我知道有更好的方法并且需要使用 jquery，但我只是还没有找到示例。

谢谢

<小时/>

呵呵。我知道 jQuery 是错误的方法，但有时我会感到沮丧，只想让一些东西发挥作用。

邓肯给了我最终想到的线索。我认为它与 Angular 的思维方式很接近，所以我在这里添加它。

对我正在使用的示例的更好描述: vert 诊所有多名 vert ，每个 vert 有多名患者。网页显示 vert 列表。单击 vert 的姓名会显示患者列表，患者姓名旁边有一个按钮可以切换患者的状态(当前/非当前)。

all-vets.component.ts

export class AllVetsComponent implements OnInit {
  vets: any = [];
  patients: any = [];
  displayPatients: any = [];
  patientsRetrieved: boolean = false;
  constructor(private http:  Httppatient) { }

  ngOnInit() {
    // hit a web api, parse the data into this.vets and this.patients
  }

  getAllPatients(vetID: number): any[] {
    // hit web api and get just the patients for the vet id
  }
  getPatients(vetID: number): void {
    this.patientsRetrieved = false;
    this.displayPatients[vetID] = [];
    this.displayPatients[vetID] = getAllPatients(vetID);
    this.patientsRetrieved = true;
    $('#' + vetID + '_patients').toggle(500); // yes, still jQuery, but used for animations
  }

  showPatients(): boolean{
    return this.patientsRetrieved;
  }

  changeStatus(patientID: number): void{
    // find the patient with that id and toggle the currentPatient value
    // post the change back to the api so it can go in the db
  }
}

all-vets.component.html

  <div class='card' *ngFor='let vet of vets'>
    <div class='card-header' role='tab' [id]='vet?.vet_id'>
      <a (click)='getAllPatients(vet?.vet_id)'
         class="collapsed"
         data-toggle="collapse"
         (href)='"#" + vet?.vet_id'
         aria-expanded="false"
      >
        {{vet?.vet_first_name}} {{vet?.vet_last_name}}
      </a>
    </div>

    <div [id]='vet?.vet_id + "_patients"'
       class="collapse hide" role="tabpanel"
       [attr.aria-labelledby]='vet?.vet_id' [attr.data-parent]='"#" + vet?.vet_id'>
    <div class="card-body patient-display">
      <div class='container-fluid'>
        <div class='row patient-listing patient-listing-header'>
          <span class='patient-name col'>Name</span>
          <span class='current-patient col'>Change Status</span>
        </div>
        <ng-template ngIf='showPatients()'>
          <div class='row patient-listing' *ngFor='let patient of patients'>
            <span class='patient-name col ' [ngClass]="{'currentpatient': patient.current_patient === 1, 'notpatient': patient.current_patient !== 1}">
              {{patient?.name}}
            </span>
            <span class='patient-owner col'>
              {{patient?.owner}}
            </span>
              <button class='btn btn-primary btn-sm' (click)='changeStatus(patient?.name)'>
                  <span *ngIf='patient.current_patient'>
                    Current
                  </span>
                  <span *ngIf='!patient.current_patient'>
                    Not Current
                  </span>
              </button>
            </span>
          </div>
        </ng-template>
      </div>
    </div>
  </div>
</div>

我删除了无关的细节并更改了名称以保护无辜者。

这对我有用。唯一的非 Angular 部分是显示卡体的 jquery。我可以使用 Angular 来切换类，但我想添加延迟，这样就不会那么突然。可能也有一种方法可以做到这一点；我只是还没学会而已。正确单击按钮会更新按钮文本并更改患者姓名的样式，这就是我所追求的一般行为。

待办事项:

• 替换剩余的 jQuery 切换功能
• 将 aria-live 和 aria-announce 添加到正确的元素
• 根据需要添加 aria-role 和其他 aria
• 使用所有复杂的现实世界数据而不是概念证明

谢谢邓肯!

Answer 1

您需要使用 Angular 来更新 DOM。使用 jQuery 插入的 HTML 不会被编译为使用任何 Angular Directive(指令)。

<div *ngfor='let current of users'>
  <p>{{current?.name}} <a (click)='more(current?.id)'>Click for more</a>
   <span *ngIf="wantMore[current?.id]">
       more info
       <button class='btn btn-primary btn-sm' (click)="changeCurrent()">
   </span>
  </p>
</div>

然后在您的代码中:

export class Person {
  public wantMore = {};
  constructor() { }
  more(id: any){
    this.wantMore[id] = true;
  }
  changeCurrent() {
    console.log('hello world', this);
  }
}