Question

我有一个插入MySQL数据库的表单。
POST请求和GET请求完美运行。

我决定在MySQL表中添加一个id列。
用于添加我的id列的SQL语句是：
ALTER TABLE thestuff ADD COLUMN id INT AUTO_INCREMENT UNIQUE FIRST;

在我在表格中添加id列之前，当我输入日期和内容并按下提交时，提取将完美运行，日期和内容将立即显示。

但是现在我添加了id列，当我添加日期和内容并按提交时，日期和内容会立即显示，但ID也应如此，但由于某种原因它不会。

我已经尝试了所有内容，无法弄清楚为什么 id有延迟。
让我显示id的唯一方法是刷新页面。

任何建议都将非常感谢！
谢谢！

之前

后

HTML

<body ng-app="myApp">

  <div ng-controller="insertController">
    <h2> What I learned today </h2>
    <form>
      Date <br>
      <input type="text" ng-model="date"><br><br>
      Content <br>
      <textarea rows="10" cols="50" ng-model="content"></textarea><br><br>
      <input type="button" value="Submit" ng-click="insertdata()">
    </form>
  </div>

  <div ng-controller="fetchController"><br>
    <span ng-repeat="item in results">
      <div class="card">
        id: {{item.id}}<br>
        <span class="bold-underline">{{item.date}}</span><br>
        {{item.content}}
        <button class="deleteButton" ng-click="deleteThisItem()"> x </button>
      </div>
      <br><br>
    </span>
  </div>

</body>

fetch.php

<?php
  header('Access-Control-Allow-Origin: *'); // clientside(Node) <-> serverside(PHP)

  $theConnection = new mysqli("localhost", "root", "", "storestuff");

  if($theConnection->connect_error) {
    printf("Connection failed: %s\n", $theConnection->connect_error);
    exit();
  }

  $query = "SELECT * FROM thestuff";
  $theData = array();

  if($result = $theConnection->query($query)) {
    while($row = mysqli_fetch_array($result)) {
      $theData[] = array(
        'id'=>$row['id'],
        'date'=>$row['date'],
        'content'=>$row['content']);
    }
    echo json_encode($theData); // Echo the output for the controller to access
    $result->free(); // Free the result set
  }
  else {
    echo "0 results.";
  }
  $theConnection->close(); // Close the connection
?>

fetchController.js

var size = 0;
var count = 0;

app.controller('fetchController', function ($scope, $http, resultsService) {
  $http.get('http://localhost/storestuff/fetch.php')
    .then(function successCallback(response) {
      size = (response.data).length;
      while(count < size) {
        var id = response.data[count].id;
        var date = response.data[count].date;
        var content = response.data[count].content;
        resultsService.addItem(id, date, content);
        count++;
      }
      size = 0;
      count = 0;
      $scope.results = resultsService.getItems();
  });
});

Result.js

app.service('resultsService', function() {
  var results = new Array();

  var addItem = function(id, date, content) {
    var obj = new Object();
    obj['id'] = id;
    obj['date'] = date;
    obj['content'] = content;
    results.push(obj);
  }

  var getItems = function() {
    return results;
  }

  var deleteItem = function() {

  }

  return {
    addItem: addItem,
    getItems: getItems,
    deleteItem: deleteItem
  };

});

insert.php

<?php

  header('Access-Control-Allow-Origin: *');

  $theConnection = mysqli_connect("localhost", "root", "", "storestuff");
  if(mysqli_connect_errno()) {
    echo "Failed to connect to MySQL.";
  }

  $theData = json_decode(file_get_contents('php://input'));
  $date = mysqli_real_escape_string($theConnection, $theData->date);
  $content = mysqli_real_escape_string($theConnection, $theData->content);

  mysqli_query($theConnection, "INSERT INTO thestuff(date, content) VALUES('$date', '$content')");

  mysqli_close($theConnection);

?>

insertController.js

var app = angular.module('myApp', []);

app.controller('insertController', function($scope, $http, resultsService) {
  $scope.insertdata = function() {
    $http({
      method: 'POST',
      url: 'http://localhost/storestuff/insert.php',
      data: {'date':$scope.date, 'content':$scope.content, 'in':'json-format'},
      headers: {'Content-Type': 'application/x-www-form-urlencoded'}
    })
    .then(function(res) {
      console.log("Successful response", res)
      resultsService.addItem($scope.date, $scope.content);
      $scope.date = "";
      $scope.content = "";
    })
    .catch(function(err) {
      console.error("Error with POST", err);
    });
  }
});

Answer 1

insertController您缺少id参数

resultsService.addItem($scope.date, $scope.content); //wrong

因此日期被分配到id。

正确： resultsService.addItem(res.id, $scope.date, $scope.content);

为什么ng-repeat在自动递增id时表现得很奇怪？

1 个答案: