angular 在模型中找不到切换功能

Question

我在模型 class 中绑定数据并很好地循环数据。但是我未能将模型 class 中的切换功能绑定到模板点击事件。

我创建了一个模型来绑定来自笑话列表组件的数据并使用 ngFor 指令循环笑话。创建了 jokerow 组件并将笑话对象作为来自笑话列表的输入参数发送。这些属性工作正常。但未检测到该功能。

型号：

export interface IJoke {
    fname: string;
    lname: string;
    hide: boolean;    
}

export interface IJokelist {
    jokeList: IJoke[];
}

export class JokeModel {
    jokeList: IJokelist;
    joke: IJoke;
    hide: boolean;

    constructor(jokeList: IJokelist) {
        this.jokeList = jokeList;
        // this.hide = true;
    }

    getAllProducts(): any {
        return this.jokeList;
    }

    toggle(): void {
        //this.hide = !this.hide;
        console.log('hi');
    }
}

jokelist.Component.ts

export class JokelistComponent implements OnInit {

  jokesList: IJokelist;

  jokesStatic: any = [{ fname: 'chandu', lname: 'm', hide: true },
  { fname: 'venkat', lname: 'p', hide: true },
  { fname: 'ramu', lname: 'b', hide: true }];


  constructor() {
    const newProduct = new JokeModel(this.jokesStatic);
    this.jokesList = newProduct.getAllProducts();
  }

  ngOnInit() {
  }
}

jokelist.component.html

<app-jokerow *ngFor="let j of jokesList" [joke]="j"></app-jokerow>

jokerow组件

export class JokerowComponent implements OnInit {
  @Input('joke') data: IJoke;

  constructor() { }

  ngOnInit() {
  }

}

jokerow.component.html

<div class="card card-block">
    <h4 class="card-title">{{data.fname}}</h4>     
    <p class="card-text"
     [hidden]="data.hide">{{data.lname}}</p>
  <a (click)="data.toggle()"
     class="btn btn-warning">Tell Me
  </a>
</div>

Answer 1

切换功能并非特定于您的型号。

你必须传递数据才能切换然后你可以show/hide。

<a (click)="toggle(data)"
     class="btn btn-warning">Tell Me
  </a>

在组件中，

 toggle(data): void {
        data.hide = !data.hide;   //updated
        console.log('hi');
    }

希望对您有所帮助。

Answer 2

更新 getAllProducts 使 jokesList 元素将具有 toggle 功能

getAllProducts(): any {
    return this.jokeList.map (j => { 
        j.toggle = this.toggle;
        return j;
    });
}

angular 在模型中找不到切换功能

angular cant find toggle function in model

events

model-driven

angular