Question

我在组件（active.ts）中创建一个激活产品的函数。在active.html中，我创建了一个幻灯片切换表单。我希望在其他组件中使用这个组件来查看和使用它。

export class Product { 
    product_id: string; 
    active: number; 
    public gup(token: string, id?: number): string { 
        let usp = new URLSearchParams(); 
        usp.append('active', this.active.toString()); 
        usp.append('product_id', this.product_id.toString()); 
        usp.append('token', token); 
        return usp.toString(); 
    } 
}

我的代码active.ts

 @Component({
  selector: 'sdci-active-form',
  templateUrl: './sdci-active-form.component.html',
  styleUrls: ['./sdci-active-form.component.css']
})

    export class Active implements OnInit {
          activate: FormGroup;
          prod: Product;
          loading: boolean = false;
          device: number = 1;
          constructor(private ws: serviceh,
            private router: Router,
            private fb: FormBuilder,
            private activatedRoute: ActivatedRoute,
          ) {

            this.activate = this.fb.group({
              'active': new FormControl('', Validators.required)
            });
          } 
          ngOnInit() {  
            this.activeform();
          }
          activeform() {
            this.activatedRoute.params.subscribe(
              params => {
                this.ws.getproductById(params['id']).subscribe(
                  prod => {
                    this.prod = prod;
                    this.activate.controls['active'].setValue(prod.active);
                  }
                );
              }
            );
          }
          onActiveProduct() {
            this.loading = true;
            let editprod = new Product(
              this.activate.value
            );
            editprod.product_id = this.prod.product_id;
            this.ws.activateprod(editprod).subscribe(
              result => {
                if (result === true) {
                return true
                } else {
                  this.loading = false;
                }
              },
              error => {
                this.loading = false;
              }
            );
          }
          onChange(value) {
            if (value.checked === true) {
              this.device = 1;
            } else {
              this.device = 0;
            }
          }
        }

有效的html

<form [formGroup]="activeform" class="col s12" materialize>
<mat-slide-toggle formControlName="active" id="active" [(ngModel)]="device" (change)="onChange($event)" (click)="onActiveProduct()">
</mat-slide-toggle>
{{device}}
</form>

而且，我希望不会形成另一个组件。

Product.html

 <sdci-active-form(click)="onActiveProduct($event)"></sdci-active-form>

这个功能因为无法读取属性＆＃39; toString＆＃39;为null

我想也是，因为我不知道product_id，当我从组件激活时使用时，这项工作很好。在另一个组件中不起作用。

你能告诉我如何解决这个问题吗？

无法读取属性＆＃39; toString＆＃39; null - Typescript

0 个答案: