Html 发生变化时表中未显示的数据，角度

我有一个问题与我的

*ngIf

有关。我有两个按钮在同一个表中显示不同的数据。我正在过滤一个对象数组。问题是，如果我点击其中一个按钮，如“Dog”，将显示正确的数据，但如果我点击“cat”，则列将为空。有人知道我做错了什么吗

动物实验

  cat: boolean;
  dog: boolean;

  animals: Animal[] = [
    {type: 'cat', name: 'snoopy', color: 'white'},
    {type: 'dog', name: 'spooch', color: 'black'}
  ];

chooseCat() {
    this.cat = true;
    this.dog = false;

    this.animals = this.animals.filter(d => {
      return d.type === 'cat'
    });
}

chooseDog() {
    this.cat = false;
    this.dog = true;

    this.animals = this.animals.filter(d => {
      return d.type === 'dog'
    });
}

animal.html

 <div class="col-xs-12" class="icon" (click)="chooseCat()">
      <img src="../assets/img/cat.png" class="icon;">
      cat
 </div>

 <div class="col-xs-12" class="icon" (click)="chooseDog()">
      <img src="../assets/img/dog.png" class="icon;">
      dog
 </div>


<table *ngIf="cat || dog">
<tr>
<td>name</td>
<td>color</td>
</tr>

<tr *ngFor="let a of animals">
<td>{{a.name}}</td>
<td>{{a.color}}</td>
</tr>
</table>

猫
狗
名称
颜色
{{a.name}}
{{a.color}}

当您第一次单击“猫”并进行筛选时，将所有狗从“this.animals”数组中排除。当你点击“狗”时，你会过滤来自同一阵列的所有猫，从而将其完全清空。如果您想显示所有的狗或猫，您应该对原始数组进行深度复制，而不是对其进行过滤。

当您第一次单击“猫”并进行过滤时，您会将所有狗从“this.animals”数组中排除。当你点击“狗”时，你会过滤来自同一阵列的所有猫，从而将其完全清空。如果您想显示所有的狗或猫，您应该对原始数组进行深度复制，而不是对其进行过滤。

您在方法中过滤的是“名称”。那应该是“类型”

试试这个：

chooseCat() {
  this.cat = true;
  this.dog = false;
  this.animals = this.animals.filter(d => {
    return d.type === 'cat'
  });
}

---

您正在筛选方法中的“名称”。那应该是“类型”

试试这个：

chooseCat() {
  this.cat = true;
  this.dog = false;
  this.animals = this.animals.filter(d => {
    return d.type === 'cat'
  });
}

您的筛选条件是错误的，请更改类型并创建一个或多个数组，然后在html中对其进行赋值

 this.animals2 = this.animals.filter(d => {
      return d.type == 'cat'
    });

类似html的

<tr *ngFor="let a of animals2">
<td>{{a.name}}</td>
<td>{{a.color}}</td>
</tr>

创建

typee

作为组件中的参数

typee:string;

在html中更改

typee

 <div class="col-xs-12" class="icon" (click)="typee='cat'">
      <img src="../assets/img/cat.png" class="icon;">
      cat
 </div>

 <div class="col-xs-12" class="icon" (click)="typee='dog'">
      <img src="../assets/img/dog.png" class="icon;">
      dog
 </div>

猫
狗

然后将自定义管道指定给表

<tr *ngFor="let a of animals | filter : typee">
  <td>{{a.name}}</td>
  <td>{{a.color}}</td>
</tr>

{{a.name}}
{{a.color}}

您的筛选条件是错误的，请更改类型并创建一个或多个数组，然后在html中对其进行赋值

 this.animals2 = this.animals.filter(d => {
      return d.type == 'cat'
    });

类似html的

<tr *ngFor="let a of animals2">
<td>{{a.name}}</td>
<td>{{a.color}}</td>
</tr>

创建

typee

作为组件中的参数

typee:string;

在html中更改

typee

 <div class="col-xs-12" class="icon" (click)="typee='cat'">
      <img src="../assets/img/cat.png" class="icon;">
      cat
 </div>

 <div class="col-xs-12" class="icon" (click)="typee='dog'">
      <img src="../assets/img/dog.png" class="icon;">
      dog
 </div>

猫
狗

然后将自定义管道指定给表

<tr *ngFor="let a of animals | filter : typee">
  <td>{{a.name}}</td>
  <td>{{a.color}}</td>
</tr>

{{a.name}}
{{a.color}}

选择“狗”时，过滤的数据仅包含狗，因此

动物
数组中没有猫。此外，您需要将
动物
设置为只读，并且应该使用临时变量。或者，您可以使用
管道
对其进行过滤。您可以通过检查
名称
属性来进行过滤，但您想检查
类型
属性。您有一个类型错误和一个逻辑错误。由于登录时Typio filter属性错误，您不应该一次又一次地筛选同一数组，您的核心数据应该相同，您需要从核心数组生成筛选器数组。一种解决方案是第二个数组，另一种是管道。在回答中，我详细介绍了这两个示例，您可以在@yorozuyawa检查，当您选择dog时，过滤的数据只包含狗，因此
动物
数组中没有猫。此外，您需要将
动物
设置为只读，并且应该使用临时变量。或者，您可以使用
管道
对其进行过滤。您可以通过检查
名称
属性来进行过滤，但您想检查
类型
属性。您有一个类型错误和一个逻辑错误。由于登录时Typio filter属性错误，您不应该一次又一次地筛选同一数组，您的核心数据应该相同，您需要从核心数组生成筛选器数组。一种解决方案是第二个数组，另一种是管道。在回答中，我详细介绍了这两个例子，您可以检查一下@yorozuyaThis基本上是正确的，尽管我认为这里不需要深度复制。此外，这不是一个答案，这基本上是正确的，尽管我认为这里不需要深度复制。另外，这不是答案谢谢，我已经改变了条件，但仍然不起作用。我可以显示一个列表，但如果我单击另一个按钮显示第二个列表，它将返回EmptyTanks，我已经更改了条件，但它仍然不起作用。我可以显示一个列表，但如果我点击另一个按钮显示第二个列表，它会返回清空你这么多！非常感谢你！