不更新角2中的双向服务

Question

我试图让一个双向服务工作起来，却找不出我在哪里错过了一步，或者做了什么错事。控制台没有错误，但是当我试图通过它发送数据时，什么也不会发生。(下面是)是我迄今为止所拥有的东西的柱塞。

我想要完成的过程是这样的

将这部分数据加载到app.ts中，并使用input.copmonent.ts进行迭代。(成功完成)。

{
  "questions":[
      {
        "question": "How tall are you?",
        "name": "height",
        "id": "heightCtrl",
        "template": "smInput"
      },
      {
        "question": "What is your favorite color?",
        "name": "color",
        "id": "colorCtrl",
        "template": "smInput"
      },
      {
        "question": "What kind of car do you drive?",
        "name": "car",
        "id": "carCtrl",
        "template": "smInput"
      }

    ]
}

将数据加载到新变量，并在模板中使用ngModel更新用户响应。(成功完成)

//Input Component (omitted for relevance)

@Component({
    template:`
             <ng-container *ngIf="Qdata.template == 'smInput'">


                 <p>{{Qdata.question}}</p>

                 <input type="text"
                     id="Qdata.id"
                     name="Qdata.name"
                     [(ngModel)]="Response.response"
                 >


             </ng-container>
             `
})

export class InputComponent implements OnInit{    

    @Input() Qdata: any;        //from app.ts

    Response: FormResponse={};  // new variable

    ngOnInit(){ this.prepResponse(); }

    prepResponse(){
        let a = this.Qdata;
        let b = this.Response;

        b.question = a.question;
        b.id = a.id;
        b.name = a.name;
    }
}



//    Note: FormResponse is a custom class I made that's shaped the same as
//    the json data with the addition of a "response:string='';" field.

创建服务，从input.component.ts中的input.component.ts变量接收数据，并使app.ts可以订阅。(成功完成..。我想..。(大部分)

//Imports Observable and Subject from proper places

@Injectable()

export class AnswerService {

  private FormList = new Subject<FormResponse[]>();  // so far I think this is contributing
                                                        to the problem somehow.

  addResponse(data:FormResponse){
    this.FormList.next(data);
  }

  getFormList(): Observable<FormResponse[]>{
    return this.FormList.asObservable();
  }

}

在Input.component.ts中创建函数，将数据发送到服务中的addResponse()函数。(成功完成..。我想)

import { AnswerService }  from './answer.service';

@Component({
    template:`
         <ng-container *ngIf="Qdata.template == 'smInput'">
             <!--previous HTML -->

             <button (click)="sendResponse()">send</button>
             <!-- plan to ultimately use OnChanges, using this to test -->

        </ng-container>
         `,
    providers: [AnswerService]
})

export class InputComponent implements OnInit{    

    @Input() Qdata: any;

    Response: FormResponse={};


    constructor( private _ans : AnswerService ) {}

    ngOnInit(){ ... }   prepResponse(){...}

    sendResponse(): void{
        let a = this.Response;
        let grp = new FormResponse({
            question:a.question,
            response:a.response,
            id:a.id,
            name:a.name
        });

        this._ans.addResponse(grp);
    }

}

在FormList中创建app.ts订阅。(成功完成)

//app.ts (omitted for relevance)

import { AnswerService } from './answer.service';

@Component({
    providers: [ AnswerService ]
})

export class App implements OnInit{

    FormData: Array<FormResponse>=[];

    constructor( private _ans : AnswerService ){}

    ngOnInit(){
        this._ans.getFormList().subscribe( list => { list = this.FormData; }); 
    }
}

到达这个点后，所有的东西都会很好地加载，不会出现任何错误，但是当我在输入字段中键入某项内容并单击send时，我在app.ts模板中创建的绑定中不会显示什么时候会向数组添加一个新对象。当我尝试不同的方法，例如push()而不是next()时，我会得到告诉我this.FormList.push() is not a function的错误。我该怎么做才能让这件事起作用？

我还想指出，我在input.copmonent.ts文件中“复制数据”的原因是，在实际使用中，Qdata变量将不仅仅具有4个属性，尽管它只会将这4个发送到Response变量以发送回父组件。

从这一点开始，我计划使用FormData变量来迭代模板驱动的表单，其中包含隐藏的预填充输入，如下所示

<form #myForm="ngForm">

    <div *ngFor="let a of FormData">

        <div [attr.data-blank]="a.id" class="form-group">
        <!-- To force Angular to iterate a wrapper for each group -->

            <input type="hidden" class="form-control"
                [attr.name]="a.id" [(ngModel)]="a.question"
            >

            <input type="hidden" class="form-control"
                [attr.name]="a.name" [(ngModel)]="a.response"
            >
        </div>

    </div>

</form>

我之所以尝试这样做，是因为我所做的问卷类型有大量的可选问题嵌套在多层你可以在这里看到的问题中。我希望这将是一个很好的方式收集用户的答案，并把它们放在一个地方，没有所有的头痛。只要answer.service被导入到input.component中，它将始终能够发送/更新列表，不管用户往哪个方向走，以及它需要什么样的输入环境。我需要做些什么来确保answer.service能够提供这种用途？

Answer 1

这里有几个问题，第一个问题是您的child component也将answer service标记为提供程序，因此它将获得AnswerService的一个新实例，而不是获得与父服务器相同的服务实例。

@Component({
  selector: 'input-component',
  templateUrl: 'src/input.component.html'
  // No providers
})
export class InputComponent implements OnInit{

  // ...

  /** Gets same instance of AnswerService as the parent component */
  constructor(private _ans: AnswerService){}

  sendResponse(): void{
    this._ans.addResponse(this.Response);
  }     
}

而且，用于getter的FormList是不正确的，我建议使用这种方法，就像在官方例子中一样。

你的服务应该是这样的。

@Injectable()
export class AnswerService {

      private _formList = new Subject<any>();
      public FormList = this._formList.asObservable();

      addResponse(event: FormResponse){
          this._formList.next(event);
      }
}

现在，在您的app.component上，您需要订阅这样的事件：

@Component({
  selector: 'my-app',
  templateUrl:'src/app.html',
  providers: [ QuestionService, AnswerService ]
})
export class App implements OnInit{

  FormData: FormResponse[] = [];

  // ...

  answerSubscription = this._ans.FormList.subscribe(a => {
    console.log('gets here '+JSON.stringify(a, null, '\t') )
    this.FormData.push(a)
  })

  // ...
}

注意，在订阅中，我将结果附加到FormData数组中。QuestionService代码可能需要一些修改，但您知道了。

这是一个柱塞工作！