Angular TS2322：类型“字符串”不可分配给类型“IHamster []”

Question

我的代码有一些问题，它看起来很简单。 类型字符串不可分配给类型 Hamster[]，但我找不到问题。

我可以将值传递给孩子，但如果我使用 IHamster 的数组，我会收到此错误。 希望可以有人帮帮我。

抱歉问题的质量，这是我的第一篇文章

主要的

import { IHamster } from './ihamster';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  title: string = "refresher"
  hamsters: IHamster[] = [
    {
      img: "https://images.unsplash.com/photo-1533152162573-93ad94eb20f6?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2670&q=80", 
      alias: "Mr. Hamster",
      name: "Hamsterz",
      bio: "I am here to find some friends!"
    },
    {
      img: "https://images.unsplash.com/photo-1625406736528-42c8d985a072?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2669&q=80",
      alias: "Mrs. Hamster",
      name: "Hammine",
      bio: "I am here to see what my husband does here!"
    },
    {
      img: "https://images.unsplash.com/photo-1621668590468-828e1344466b?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2670&q=80",
      alias: "Bob",
      name: "Hon Hamo",
      bio: "I am here to hack ervery body ervery were, i got the red pill!"
    },
    {
      img: "https://images.unsplash.com/photo-1618232118117-98d49b20e2f5?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2670&q=80",
      alias: "Charles",
      name: "Chano Chai",
      bio: "Give me some food, or you get the foo!"
    },
    {
      img: "https://images.unsplash.com/photo-1584553391899-7b5b3287c66d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2670&q=80",
      alias: "vicky",
      name: "Victoria Nul",
      bio: "knock, knock - lets take the rock!"
    },
    {
      img: "https://images.unsplash.com/photo-1636725360313-d37f4a232cfa?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2679&q=80",
      alias: "Mixxy",
      name: "Luna Lu",
      bio: "I am just a beauty 🥰"
    }
  ]; 
  
}

这是->标记为<-的仓鼠

<main>

  <div class="hamster-card_container">
    <app-hamster-card *ngFor="let hamster of hamsters"
      img={{hamster.img}}
      alias={{hamster.alias}}
      name={{hamster.name}}
      bio={{hamster.bio}}>
    </app-hamster-card>
  </div>

  <app-proposals 
    title={{title}}
    hamsters={{hamsters}}>
  </app-proposals>

</main>

孩子

import { IHamster } from '../ihamster';

@Component({
  selector: 'app-proposals',
  templateUrl: './proposals.component.html',
  styleUrls: ['./proposals.component.scss']
})
export class ProposalsComponent implements OnInit {
  @Input() hamsters: IHamster[] = [];
  @Input() title: string = "";
  number: number = Math.floor(Math.random() * this.hamsters.length) + 1; 

  constructor() {
  }

  ngOnInit(): void {
  }

}

标题顺利通过。

<div class="proposals-container">
  <p>{{title}}</p>
  <!-- <ng-component *ngFor="let hamster of hamsters; let i = index">
    <ng-component *ngIf="(i +1) % number == 0">
      <app-proposals-profile
      
      >
      </app-proposals-profile>
    </ng-component>
  </ng-component> -->
  
</div>

我收到错误：错误：src/app/app.component.html:15:5 - 错误 TS2322：类型“字符串”不可分配给类型“IHamster []”。

15只仓鼠={{仓鼠}}> ~~~~~~~~

src/app/app.component.ts:6:16 6 templateUrl: './app.component.html', ~~~~~~~~~~~~~~~~~~~~~~~~~ 发生错误在组件 AppComponent 的模板中。

✖ 编译失败。

Answer 1

这可能会有所帮助。 如果要传递参数，则需要使用[]来标记您传递的值是变量而不是字符串。

<app-proposals title={{title}} [hamsters]="hamsters"></app-proposals>