Question

我有一个看起来像这样的人组件（非常简化）：

person.component.html

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);
  }
}

person.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
  }
}

当我点击更多按钮时，更多（id）会触发，并显示有关此人的更多信息。这样就可以了。

但是当我点击更改按钮时，更改（）永远不会触发。我知道有更好的方法和jquery需要去，但我还没有找到一个例子。

谢谢，

嘿。我知道jQuery是错误的方式，但有时我会感到沮丧，只是想让某些东西起作用。

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

更好地描述了我正在玩的例子：兽医诊所有多名兽医，每名兽医都有多名患者。网页显示了一个兽医列表。点击兽医名称会显示患者列表，患者姓名旁边有一个按钮可切换患者的状态，当前/不当前。

全vets.component.ts

  <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>

全vets.component.html

O(N^2)

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

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

TODO：

替换剩余的jQuery切换功能
将aria-live和aria-announce添加到正确的元素
酌情添加咏叹调角色和其他咏叹调
使用所有复杂的现实世界数据而不是概念证据

谢谢Duncan！

Answer 1

您需要使用angular来更新DOM。使用jQuery插入的HTML不会被编译为使用任何角度指令。

<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);
  }
}

Answer 2

试试这个：

var minutes = Math.floor(o / 60);

此外，我看到你调用了 changeCurrent 函数，但调用了你的函数更改 ......

在typescript中的angular 4.3（click）语法

2 个答案: