价值不会在Angular中以收音机按钮绑定到评级组件

Question

我有一个项目，我想拥有可以在其他组件上使用的评分组件（可重复使用），因为我还编写了一些CSS PSUDO选择器，这些选择器也没有应用于页面加载。我已经在这个论坛上尝试了所有答案，但是

对于Eg 将[（ngmodel）]添加到无线电按钮组后，默认[已检查]不再工作 还有更多。

捻： 然后，为了识别（经过大量的尝试和阅读答案）并尝试，我在我的其他一些项目中添加了该组件，并且在那里正常工作。在页面加载，如果ts文件具有标记= 3，则在页面加载中选择了3个星星。

之后，仅在此论坛上分享我创建了这个 stackblitz ，但这也是工作。 现在，我还将共享糟糕的项目和好项目的代码，不确定问题是什么

糟糕的项目

HTML

<!-- star rating -->
<div class="rating-wrapper">

  <!-- star 5 -->
  <input type="radio" id="5-star-rating" name="star-rating" value="5" [checked]="starrating === '5'" [(ngModel)]="starrating">
  <label for="5-star-rating" class="star-rating">
    <i class="fa fa-star d-inline-block"></i>
  </label>

  <!-- star 4 -->
  <input type="radio" id="4-star-rating" name="star-rating" value="4" [checked]="starrating === '4'" [(ngModel)]="starrating">
  <label for="4-star-rating" class="star-rating star">
    <i class="fa fa-star d-inline-block"></i>
  </label>

  <!-- star 3 -->
  <input type="radio" id="3-star-rating" name="star-rating" value="3" [checked]="starrating === '3'" [(ngModel)]="starrating">
  <label for="3-star-rating" class="star-rating star">
    <i class="fa fa-star d-inline-block"></i>
  </label>

  <!-- star 2 -->
  <input type="radio" id="2-star-rating" name="star-rating" value="2" [checked]="starrating === '2'" [(ngModel)]="starrating">
  <label for="2-star-rating" class="star-rating star">
    <i class="fa fa-star d-inline-block"></i>
  </label>

  <!-- star 1 -->
  <input type="radio" id="1-star-rating" name="star-rating" value="1" [checked]="starrating === '1'" [(ngModel)]="starrating">
  <label for="1-star-rating" class="star-rating star">
    <i class="fa fa-star d-inline-block"></i>
  </label>
 
</div>

组件TS文件 TS文件

import { Component,  OnInit  } from '@angular/core';

@Component({
  selector: 'FH-rating',
  templateUrl: './rating.component.html',
  styleUrls: ['./rating.component.css']
})
export class RatingComponent implements OnInit {

  starrating="3";   /// <==== THESE ARE THE STARS THAT I WANT TO HAVE SELECTED BY DEFAULT ON PAGE LOAD
//coachrating:string='5';
  constructor() { }


  ngOnInit(): void {

  }}

CSS文件 CSS文件

.container-wrapper {
  background-color: #EDF0F9;
}

.container {
  height: 100vh;
}

.rating-wrapper {
  align-self: center;
  box-shadow: 7px 7px 25px rgba(198, 206, 237, 0.7), -7px -7px 35px rgba(255, 255, 255, 0.7), inset 0px 0px 4px rgba(255, 255, 255, 0.9), inset 7px 7px 15px rgba(198, 206, 237, 0.8);
  border-radius: 4rem;
  display: inline-flex;
  direction: rtl !important;
  padding: 1.5rem 2.5rem;
  margin-left: auto;
}
.rating-wrapper label {
  color: #E1E6F6;
  cursor: pointer;
  display: inline-flex;
  font-size: 2.1rem;
  padding: 1rem 0.6rem;
  transition: color 0.5s;
}
.rating-wrapper svg {
  -webkit-text-fill-color: transparent;
  -webkit-filter: drop-shadow 4px 1px 6px #c6ceed;
  filter: drop-shadow(5px 1px 3px #c6ceed);
}
.rating-wrapper input {
  height: 100%;
  width: 100%;
}
.rating-wrapper input {
  display: none;
}
.rating-wrapper label:hover,
.rating-wrapper label:hover ~ label,
.rating-wrapper input:checked ~ label {
  color: #34AC9E;
}
.rating-wrapper label:hover,
.rating-wrapper label:hover ~ label,
.rating-wrapper input:checked ~ label {
  color: #34AC9E;
}

包。json文件

{
  "name": "fit-hub",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~10.0.5",
    "@angular/common": "~10.0.5",
    "@angular/compiler": "~10.0.5",
    "@angular/core": "~10.0.5",
    "@angular/forms": "~10.0.5",
    "@angular/platform-browser": "~10.0.5",
    "@angular/platform-browser-dynamic": "~10.0.5",
    "@angular/router": "~10.0.5",
    "@auth0/angular-jwt": "^5.0.2",
    "angularx-social-login": "^3.5.7",
    "bootstrap": "^4.5.3",
    "font-awesome": "^4.7.0",
    "jquery": "^3.5.1",
    "popper.js": "^1.16.1",
    "rxjs": "~6.5.5",
    "tslib": "^2.0.0",
    "zone.js": "~0.10.3"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.1000.4",
    "@angular/cli": "~10.0.4",
    "@angular/compiler-cli": "~10.0.5",
    "@types/node": "^12.11.1",
    "@types/jasmine": "~3.5.0",
    "@types/jasminewd2": "~2.0.3",
    "codelyzer": "^6.0.0",
    "jasmine-core": "~3.5.0",
    "jasmine-spec-reporter": "~5.0.0",
    "karma": "~5.0.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage-istanbul-reporter": "~3.0.2",
    "karma-jasmine": "~3.3.0",
    "karma-jasmine-html-reporter": "^1.5.0",
    "protractor": "~7.0.0",
    "ts-node": "~8.3.0",
    "tslint": "~6.1.0",
    "typescript": "~3.9.5"
  }
}

现在好项目。 ts，css 文件的精确副本时，请相信我，所以我将只放置

当我说html ，

。

{
  "name": "event-hub",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~10.0.5",
    "@angular/common": "~10.0.5",
    "@angular/compiler": "~10.0.5",
    "@angular/core": "~10.0.5",
    "@angular/forms": "~10.0.5",
    "@angular/platform-browser": "~10.0.5",
    "@angular/platform-browser-dynamic": "~10.0.5",
    "@angular/router": "~10.0.5",
    "angularx-social-login": "^4.1.0",
    "bootstrap": "^4.5.0",
    "font-awesome": "^4.7.0",
    "jquery": "^3.5.1",
    "rxjs": "~6.5.5",
    "toastr": "^2.1.4",
    "tslib": "^2.0.0",
    "zone.js": "~0.10.3"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.1000.4",
    "@angular/cli": "~10.0.4",
    "@angular/compiler-cli": "~10.0.5",
    "@types/node": "^12.11.1",
    "@types/jasmine": "~3.5.0",
    "@types/jasminewd2": "~2.0.3",
    "codelyzer": "^6.0.0",
    "jasmine-core": "~3.5.0",
    "jasmine-spec-reporter": "~5.0.0",
    "karma": "~5.0.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage-istanbul-reporter": "~3.0.2",
    "karma-jasmine": "~3.3.0",
    "karma-jasmine-html-reporter": "^1.5.0",
    "protractor": "~7.0.0",
    "ts-node": "~8.3.0",
    "tslint": "~6.1.0",
    "typescript": "~3.9.5"
  }
}

package.json 检查我的边缘的收音机按钮，我看到好项目的代码生成了以下

＆lt; input _ngcontent-bqk-c61 =“” type =“无线电” ID =“ 1-Star评分”名称=”星级评级“ value =” 1“ ng-reflect-name =”恒星评级“ ng-reflect-value =” 1“ ng-reflect-model =“ 3” class =“ ng-untunted ng-ing ng-pristine ng-valid “＆gt;，

但是当我看到我的坏项目elemet时，我会看到下面的

＆lt; input _ngcontent-yor-c47 =“” type =“无线电” id =“ id =” 1-Star评级“名称=”星级评级“ value =” 1“ ng-reflect-name =” star-rating“ ng-reflect-value =“ 1”＆gt;

请观察ng-refleflect-model Angular添加了，我缺少什么？需要急需帮助

编辑1

也为好项目制作代码，它可能会有所帮助，

html

<!-- star rating -->
<div class="rating-wrapper">

  <!-- star 5 -->
  <input type="radio" id="5-star-rating" name="star-rating" value="5" [checked]="starrating === '5'" [(ngModel)]="starrating">
  <label for="5-star-rating" class="star-rating">
    <i class="fa fa-star d-inline-block"></i>
  </label>

  <!-- star 4 -->
  <input type="radio" id="4-star-rating" name="star-rating" value="4" [checked]="starrating === '4'" [(ngModel)]="starrating">
  <label for="4-star-rating" class="star-rating star">
    <i class="fa fa-star d-inline-block"></i>
  </label>

  <!-- star 3 -->
  <input type="radio" id="3-star-rating" name="star-rating" value="3" [checked]="starrating === '3'" [(ngModel)]="starrating">
  <label for="3-star-rating" class="star-rating star">
    <i class="fa fa-star d-inline-block"></i>
  </label>

  <!-- star 2 -->
  <input type="radio" id="2-star-rating" name="star-rating"  value="2" [checked]="starrating === '2'" [(ngModel)]="starrating">
  <label for="2-star-rating" class="star-rating star">
    <i class="fa fa-star d-inline-block"></i>
  </label>

  <!-- star 1 -->
  <input type="radio" id="1-star-rating" name="star-rating"  value="1" [checked]="starrating === '1'" [(ngModel)]="starrating">
  <label for="1-star-rating" class="star-rating star">
    <i class="fa fa-star d-inline-block"></i>
  </label>
</div>

ts file

import { Component, EventEmitter, Input, OnChanges, OnInit, Output } from '@angular/core';

@Component({
  selector: 'app-star',
  templateUrl: './star.component.html',
  styleUrls: ['./star.component.css']
})
export class StarComponent implements OnChanges {

  // @Input() rating: number;
  // starWidth: number;
  // @Output() notifyRatingChange: EventEmitter<string> = new EventEmitter<string>();
   starrating="4";
//coachrating:string='5';
  constructor() { }

  ngOnChanges(): void {
    //this.starWidth = this.rating * 75 / 5;
  }

  onClick(): void {
   // this.notifyRatingChange.emit("clicked!");
    //console.log(`${this.rating} was clicked`);
  }

}