0

我有一个不同类型的动物列表，比如猫和狗。当我在列表中选择动物时，对于版本，我需要将值分配给子组件。子组件在 edit.ts 中有两个输入：@input cat:animal、@input dog:animal；我只想为其中一个属性绑定传递数据。

我尝试了两个条件选择器：

<app-component *ngIf="conditionTypeDog" [Dog]="animalchoose">
</app-component>
<app-component *ngIf="conditionTypeCat" [cat]="animalchoose">
</app-component>

在我们拥有的组件中：

@input dog: Dog; 
@input cat: Cat;

让我们承认 Dog 和 Cat 类是从动物继承的：

Dog extends Animal; 
Cat extends Animal; 

Animal {
 propertygeneric1:number;
 propertygeneric2: String;
}

cat extends animal { 
property1: boolean
property2: String;
} 

Dog extends animal { 
propertyDog1:number; 
propertyDog2:String; 
}

我想要这样的解决方案：

<app-component *ngIf="conditionEdit" [Dog|Cat] = "animalchoose"> 
</app-component>

所以我希望选择的动物有条件地分配给其中一种类型，有一种方法可以使选择的动物被分配为狗，还是猫？

4

1 回答 1

0

不幸的是，没有有条件地选择以角度绑定哪个属性这样的事情。但是，您可以通过不同的方式完成相同的行为。我能想到的一种方法是使用@Inputsetter 使用instance of运算符来确定输入的类型并将其分配给类的相关属性。

  private dog: Dog;
  private cat: Cat;

  @Input() set animal(val: Animal) {
    if (!val) {
      this.cat = null;
      this.dog = null;
    }
    if (val instanceof Dog) {
      this.cat = null;
      this.dog = val;
    }
    if (val instanceof Cat) {
      this.dog = null;
      this.cat = val;
    }
  }

这是一个简单的演示https://stackblitz.com/edit/angular-jerc5p

于 2019-06-28T11:21:17.417 回答